From f9fa0ca5f9333d58d332e51fab57801f30a15012 Mon Sep 17 00:00:00 2001 From: lkramarov Date: Thu, 5 Mar 2020 17:24:36 +0300 Subject: [PATCH 1/2] feat(docs): added examples for number and date formatter (#UIM-395, #UIM-394) --- .../documentation-items.ts | 21 +- packages/mosaic-dev/date-formatter/module.ts | 297 +++++++++ .../styles.scss | 10 +- .../mosaic-dev/date-formatter/template.html | 297 +++++++++ packages/mosaic-dev/dateformatter/module.ts | 484 -------------- .../mosaic-dev/dateformatter/template.html | 610 ------------------ .../mosaic-dev/formatters/demo-template.html | 11 - .../formatters/formatters-template.html | 59 -- packages/mosaic-dev/formatters/styles.scss | 18 - .../number-formatter/demo-template.html | 15 + .../number-formatter/formatters-template.html | 57 ++ .../module.ts | 31 +- .../mosaic-dev/number-formatter/styles.scss | 30 + .../absolute-date-formatter-example.css | 8 + .../absolute-date-formatter-example.html | 62 ++ .../absolute-date-formatter-example.ts | 91 +++ .../mosaic/date-formatter/module.ts | 21 + .../range-date-formatter-example.css | 8 + .../range-date-formatter-example.html | 152 +++++ .../range-date-formatter-example.ts | 184 ++++++ .../relative-date-formatter-example.css | 8 + .../relative-date-formatter-example.html | 82 +++ .../relative-date-formatter-example.ts | 87 +++ .../mosaic/number-formatter/module.ts | 26 + .../formatters-template.html | 55 ++ .../number-formatter-overview-example.css | 25 + .../number-formatter-overview-example.html | 15 + .../number-formatter-overview-example.ts | 44 ++ .../adapter/moment-date-adapter.ts | 4 +- .../mosaic/core/formatters/date-formatter.md | 8 + .../formatters/number/number-formatter.md | 11 + 31 files changed, 1630 insertions(+), 1201 deletions(-) create mode 100644 packages/mosaic-dev/date-formatter/module.ts rename packages/mosaic-dev/{dateformatter => date-formatter}/styles.scss (71%) create mode 100644 packages/mosaic-dev/date-formatter/template.html delete mode 100644 packages/mosaic-dev/dateformatter/module.ts delete mode 100644 packages/mosaic-dev/dateformatter/template.html delete mode 100644 packages/mosaic-dev/formatters/demo-template.html delete mode 100644 packages/mosaic-dev/formatters/formatters-template.html delete mode 100644 packages/mosaic-dev/formatters/styles.scss create mode 100644 packages/mosaic-dev/number-formatter/demo-template.html create mode 100644 packages/mosaic-dev/number-formatter/formatters-template.html rename packages/mosaic-dev/{formatters => number-formatter}/module.ts (65%) create mode 100644 packages/mosaic-dev/number-formatter/styles.scss create mode 100644 packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.css create mode 100644 packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.html create mode 100644 packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.ts create mode 100644 packages/mosaic-examples/mosaic/date-formatter/module.ts create mode 100644 packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.css create mode 100644 packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.html create mode 100644 packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.ts create mode 100644 packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.css create mode 100644 packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.html create mode 100644 packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.ts create mode 100644 packages/mosaic-examples/mosaic/number-formatter/module.ts create mode 100644 packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/formatters-template.html create mode 100644 packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.css create mode 100644 packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.html create mode 100644 packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.ts create mode 100644 packages/mosaic/core/formatters/date-formatter.md create mode 100644 packages/mosaic/core/formatters/number/number-formatter.md diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts index 09f0b2502..b52fc129b 100644 --- a/packages/docs/src/app/shared/documentation-items/documentation-items.ts +++ b/packages/docs/src/app/shared/documentation-items/documentation-items.ts @@ -294,7 +294,26 @@ const DOCS: { [key: string]: DocCategory[] } = { examples: ['tags-list-types'] } ] - } + }, + { + id: 'core/styles', + name: 'Formatters', + summary: 'styles', + items: [ + { + id: 'number-formatter', + name: 'Number', + summary: '', + examples: ['number-types'] + }, + { + id: 'date-formatter', + name: 'Date', + summary: '', + examples: ['date-types'] + } + ] + }, ], [CDK]: [ diff --git a/packages/mosaic-dev/date-formatter/module.ts b/packages/mosaic-dev/date-formatter/module.ts new file mode 100644 index 000000000..f9c138be0 --- /dev/null +++ b/packages/mosaic-dev/date-formatter/module.ts @@ -0,0 +1,297 @@ +// tslint:disable:no-console +// tslint:disable:no-magic-numbers +import { Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { DateAdapter, MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime'; +import { McMomentDateModule, MomentDateAdapter } from '@ptsecurity/mosaic-moment-adapter/adapter'; + +// Depending on whether rollup is used, moment needs to be imported differently. +// Since Moment.js doesn't have a default export, we normally need to import using the `* as` +// syntax. However, rollup creates a synthetic default module and we thus need to import it using +// the `default as` syntax. +// tslint:disable-next-line:ordered-imports +import * as _moment from 'moment'; +// tslint:disable-next-line:no-duplicate-imports +import { default as _rollupMoment, Moment } from 'moment'; + + +const moment = _rollupMoment || _moment; + +@Component({ + selector: 'app', + template: require('./template.html'), + styleUrls: ['./styles.scss'], + encapsulation: ViewEncapsulation.None, + providers: [ + { provide: MC_DATE_LOCALE, useValue: 'ru' }, + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MC_DATE_LOCALE] } + ] +}) +export class DemoComponent { + ru: any = { + absolute: { + long: { + date: {}, + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + }, + relative: { + long: {}, + short: {} + }, + range: { + long: { + date: {}, + dateTime: {} + }, + middle: { + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + } + }; + + en: any = { + absolute: { + long: { + date: {}, + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + }, + relative: { + long: {}, + short: {} + }, + range: { + long: { + date: {}, + dateTime: {} + }, + middle: { + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + } + }; + + constructor(private dateAdapter: DateAdapter) { + this.populateAbsoluteLong('ru'); + this.populateAbsoluteLong('en'); + + this.populateAbsoluteShort('ru'); + this.populateAbsoluteShort('en'); + + this.populateRelativeLong('ru'); + this.populateRelativeLong('en'); + + this.populateRelativeShort('ru'); + this.populateRelativeShort('en'); + + this.populateRangeLong('ru'); + this.populateRangeLong('en'); + + this.populateRangeMiddle('ru'); + this.populateRangeMiddle('en'); + + this.populateRangeShort('ru'); + this.populateRangeShort('en'); + } + + private populateRangeShort(locale: string) { + this.dateAdapter.setLocale(locale); + + const shortRange = this[locale].range.short; + + shortRange.date.currentMonth = this.dateAdapter.rangeShortDate(moment().date(1), moment().date(10)); + shortRange.date.notCurrentYear = this.dateAdapter.rangeShortDate( + moment().date(1).month(1), + moment().date(10).month(2) + ); + shortRange.date.startsNotCurrentYear = this.dateAdapter.rangeShortDate( + moment().date(1).month(1).subtract(1, 'years'), + moment().date(10).month(2) + ); + shortRange.date.endsNotCurrentYear = this.dateAdapter.rangeShortDate( + moment().date(1).month(1), + moment().date(10).month(2).add(1, 'years') + ); + shortRange.dateTime.sameDateCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(10).hour(10).minutes(14), + moment().date(10).hour(11).minutes(28) + ); + shortRange.dateTime.sameDateNotCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) + ); + shortRange.dateTime.notCurrentMonth = this.dateAdapter.rangeShortDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + shortRange.dateTime.startsNotCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + shortRange.dateTime.endsNotCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) + ); + } + + private populateRangeMiddle(locale: string) { + this.dateAdapter.setLocale(locale); + + const middleRange = this[locale].range.middle; + + middleRange.dateTime.currentYear = this.dateAdapter.rangeMiddleDateTime(moment().date(1), moment().date(10)); + middleRange.dateTime.sameDateCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(10).hour(10).minutes(14), + moment().date(10).hour(10).minutes(28) + ); + middleRange.dateTime.sameDateNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) + ); + middleRange.dateTime.notCurrentMonth = this.dateAdapter.rangeMiddleDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + middleRange.dateTime.startsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(1).month(1).hour(11).minutes(28) + ); + middleRange.dateTime.endsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(1).add(1, 'years').hour(11).minutes(28) + ); + } + + private populateRangeLong(locale: string) { + this.dateAdapter.setLocale(locale); + + const longRange = this[locale].range.long; + + longRange.date.currentMonth = this.dateAdapter.rangeLongDate(moment().date(1), moment().date(10)); + longRange.date.notCurrentYear = this.dateAdapter.rangeLongDate( + moment().date(1).month(1), + moment().date(10).month(2) + ); + longRange.date.startsNotCurrentYear = this.dateAdapter.rangeLongDate( + moment().date(1).month(1).subtract(1, 'years'), + moment().date(10).month(2) + ); + longRange.date.endsNotCurrentYear = this.dateAdapter.rangeLongDate( + moment().date(1).month(1), + moment().date(10).month(2).add(1, 'years') + ); + longRange.dateTime.sameDateCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(10).hour(10).minutes(14), + moment().date(10).hour(11).minutes(28) + ); + longRange.dateTime.sameDateNotCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) + ); + longRange.dateTime.notCurrentMonth = this.dateAdapter.rangeLongDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + longRange.dateTime.startsNotCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + longRange.dateTime.endsNotCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) + ); + } + + private populateRelativeShort(locale: string) { + this.dateAdapter.setLocale(locale); + + const relativeShort = this[locale].relative.short; + + relativeShort.secondsAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'seconds')); + relativeShort.minutesAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'minutes')); + relativeShort.today = this.dateAdapter.relativeShortDate(moment().subtract(1, 'hours')); + relativeShort.yesterday = this.dateAdapter.relativeShortDate(moment().subtract(1, 'days')); + relativeShort.beforeYesterdayCurrentYear = this.dateAdapter.relativeShortDate( + moment().subtract(2, 'days') + ); + relativeShort.beforeYesterdayNotCurrentYear = this.dateAdapter.relativeShortDate( + moment().subtract(1, 'years').subtract(2, 'days') + ); + } + + private populateRelativeLong(locale: string) { + this.dateAdapter.setLocale(locale); + + const relativeLong = this[locale].relative.long; + + relativeLong.secondsAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'seconds')); + relativeLong.minutesAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'minutes')); + relativeLong.today = this.dateAdapter.relativeLongDate(moment().subtract(1, 'hours')); + relativeLong.yesterday = this.dateAdapter.relativeLongDate(moment().subtract(1, 'days')); + relativeLong.beforeYesterdayCurrentYear = this.dateAdapter.relativeLongDate( + moment().subtract(2, 'days') + ); + relativeLong.beforeYesterdayNotCurrentYear = this.dateAdapter.relativeLongDate( + moment().subtract(1, 'years').subtract(2, 'days') + ); + } + + private populateAbsoluteShort(locale: string) { + this.dateAdapter.setLocale(locale); + + const absoluteShort = this[locale].absolute.short; + + absoluteShort.date.currentYear = this.dateAdapter.absoluteShortDate(moment()); + absoluteShort.date.notCurrentYear = this.dateAdapter.absoluteShortDate(moment().subtract(1, 'years')); + absoluteShort.dateTime.currentYear = this.dateAdapter.absoluteShortDateTime(moment()); + absoluteShort.dateTime.notCurrentYear = this.dateAdapter.absoluteShortDateTime( + moment().subtract(1, 'years') + ); + } + + private populateAbsoluteLong(locale: string) { + this.dateAdapter.setLocale(locale); + + const absoluteLong = this[locale].absolute.long; + + absoluteLong.date.currentYear = this.dateAdapter.absoluteLongDate(moment()); + absoluteLong.date.notCurrentYear = this.dateAdapter.absoluteLongDate(moment().subtract(1, 'years')); + absoluteLong.dateTime.currentYear = this.dateAdapter.absoluteLongDateTime(moment()); + absoluteLong.dateTime.notCurrentYear = this.dateAdapter.absoluteLongDateTime( + moment().subtract(1, 'years') + ); + } +} + +@NgModule({ + declarations: [DemoComponent], + imports: [ + BrowserModule, + McMomentDateModule + ], + bootstrap: [DemoComponent], + providers: [] +}) +export class DemoModule {} + +platformBrowserDynamic() + .bootstrapModule(DemoModule) + .catch((error) => console.error(error)); diff --git a/packages/mosaic-dev/dateformatter/styles.scss b/packages/mosaic-dev/date-formatter/styles.scss similarity index 71% rename from packages/mosaic-dev/dateformatter/styles.scss rename to packages/mosaic-dev/date-formatter/styles.scss index 97688f356..ff2020a16 100644 --- a/packages/mosaic-dev/dateformatter/styles.scss +++ b/packages/mosaic-dev/date-formatter/styles.scss @@ -12,15 +12,11 @@ padding-right: 16px; } -.container { - max-width: 1000px; -} - -.light-text-secondary{ - color: $light-text-secondary; +.light-text-secondary { + color: #CCC; } .row-border { padding: 8px; - border-bottom: 1px solid $light-text-secondary; + border-bottom: 1px solid #CCC; } diff --git a/packages/mosaic-dev/date-formatter/template.html b/packages/mosaic-dev/date-formatter/template.html new file mode 100644 index 000000000..c63718742 --- /dev/null +++ b/packages/mosaic-dev/date-formatter/template.html @@ -0,0 +1,297 @@ +
+
Absolute date
+
+

Long format

+
+
+
Name
+
Russian
+
English
+
+
+
absoluteLongDate (current year)
+
{{ ru.absolute.long.date.currentYear }}
+
{{ en.absolute.long.date.currentYear }}
+
+
+
absoluteLongDate (not current year)
+
{{ ru.absolute.long.date.notCurrentYear }}
+
{{ en.absolute.long.date.notCurrentYear }}
+
+
+
absoluteLongDateTime (current year)
+
{{ ru.absolute.long.dateTime.currentYear }}
+
{{ en.absolute.long.dateTime.currentYear }}
+
+
+
absoluteLongDateTime (not current year)
+
{{ ru.absolute.long.dateTime.notCurrentYear }}
+
{{ en.absolute.long.dateTime.notCurrentYear }}
+
+
+
+
+

Short format

+
+
+
Name
+
Russian
+
English
+
+
+
absoluteShortDate (current year)
+
{{ ru.absolute.short.date.currentYear }}
+
{{ en.absolute.short.date.currentYear }}
+
+
+
absoluteShortDate (not current year)
+
{{ ru.absolute.short.date.notCurrentYear }}
+
{{ en.absolute.short.date.notCurrentYear }}
+
+
+
absoluteShortDateTime (current year)
+
{{ ru.absolute.short.dateTime.currentYear }}
+
{{ en.absolute.short.dateTime.currentYear }}
+
+
+
absoluteShortDateTime (not current year)
+
{{ ru.absolute.short.dateTime.notCurrentYear }}
+
{{ en.absolute.short.dateTime.notCurrentYear }}
+
+
+
+ +
Relative date
+
+

Long format

+
+
+
Name
+
Russian
+
English
+
+
+
SecondsAgo
+
{{ ru.relative.long.secondsAgo }}
+
{{ en.relative.long.secondsAgo }}
+
+
+
MinutesAgo
+
{{ ru.relative.long.minutesAgo }}
+
{{ en.relative.long.minutesAgo }}
+
+
+
Today
+
{{ ru.relative.long.today }}
+
{{ en.relative.long.today }}
+
+
+
Yesterday
+
{{ ru.relative.long.yesterday }}
+
{{ en.relative.long.yesterday }}
+
+
+
Before yesterday (current year)
+
{{ ru.relative.long.beforeYesterdayCurrentYear }}
+
{{ en.relative.long.beforeYesterdayCurrentYear }}
+
+
+
Before yesterday (not current year)
+
{{ ru.relative.long.beforeYesterdayNotCurrentYear }}
+
{{ en.relative.long.beforeYesterdayNotCurrentYear }}
+
+
+
+
+

Short format

+
+
+
Name
+
Russian
+
English
+
+
+
SecondsAgo
+
{{ ru.relative.short.secondsAgo }}
+
{{ en.relative.short.secondsAgo }}
+
+
+
MinutesAgo
+
{{ ru.relative.short.minutesAgo }}
+
{{ en.relative.short.minutesAgo }}
+
+
+
Today
+
{{ ru.relative.short.today }}
+
{{ en.relative.short.today }}
+
+
+
Yesterday
+
{{ ru.relative.short.yesterday }}
+
{{ en.relative.short.yesterday }}
+
+
+
Before yesterday (current year)
+
{{ ru.relative.short.beforeYesterdayCurrentYear }}
+
{{ en.relative.short.beforeYesterdayCurrentYear }}
+
+
+
Before yesterday (not current year)
+
{{ ru.relative.short.beforeYesterdayNotCurrentYear }}
+
{{ en.relative.short.beforeYesterdayNotCurrentYear }}
+
+
+
+ +
Date range
+
+

Long format

+
+
+
Name
+
Russian
+
English
+
+
+
rangeLongDate (current month)
+
{{ ru.range.long.date.currentMonth }}
+
{{ en.range.long.date.currentMonth }}
+
+
+
rangeLongDate (not current month)
+
{{ ru.range.long.date.notCurrentYear }}
+
{{ en.range.long.date.notCurrentYear }}
+
+
+
rangeLongDate (start date is not in current year)
+
{{ ru.range.long.date.startsNotCurrentYear }}
+
{{ en.range.long.date.startsNotCurrentYear }}
+
+
+
rangeLongDate (end date is not in current year)
+
{{ ru.range.long.date.endsNotCurrentYear }}
+
{{ en.range.long.date.endsNotCurrentYear }}
+
+
+
rangeLongDateTime (the same day, current year)
+
{{ ru.range.long.dateTime.sameDateCurrentYear }}
+
{{ en.range.long.dateTime.sameDateCurrentYear }}
+
+
+
rangeLongDateTime (the same day, not current year)
+
{{ ru.range.long.dateTime.sameDateNotCurrentYear }}
+
{{ en.range.long.dateTime.sameDateNotCurrentYear }}
+
+
+
rangeLongDateTime (not current month)
+
{{ ru.range.long.dateTime.notCurrentMonth }}
+
{{ en.range.long.dateTime.notCurrentMonth }}
+
+
+
rangeLongDateTime (start date is not in current year)
+
{{ ru.range.long.dateTime.startsNotCurrentYear }}
+
{{ en.range.long.dateTime.startsNotCurrentYear }}
+
+
+
rangeLongDateTime (end date is not in current year)
+
{{ ru.range.long.dateTime.endsNotCurrentYear }}
+
{{ en.range.long.dateTime.endsNotCurrentYear }}
+
+
+
+
+

Middle format

+
+
+
Name
+
Russian
+
English
+
+
+
rangeMiddleDateTime
+
{{ ru.range.middle.dateTime.currentYear }}
+
{{ en.range.middle.dateTime.currentYear }}
+
+
+
rangeMiddleDateTime (the same day)
+
{{ ru.range.middle.dateTime.sameDateCurrentYear }}
+
{{ en.range.middle.dateTime.sameDateCurrentYear }}
+
+
+
rangeMiddleDateTime (the same day, not current year)
+
{{ ru.range.middle.dateTime.sameDateNotCurrentYear }}
+
{{ en.range.middle.dateTime.sameDateNotCurrentYear }}
+
+
+
rangeMiddleDateTime (not current month)
+
{{ ru.range.middle.dateTime.notCurrentMonth }}
+
{{ en.range.middle.dateTime.notCurrentMonth }}
+
+
+
rangeMiddleDateTime (start date is not in current year)
+
{{ ru.range.middle.dateTime.startsNotCurrentYear }}
+
{{ en.range.middle.dateTime.startsNotCurrentYear }}
+
+
+
rangeMiddleDateTime (end date is not in current year)
+
{{ ru.range.middle.dateTime.endsNotCurrentYear }}
+
{{ en.range.middle.dateTime.endsNotCurrentYear }}
+
+
+
+
+

Short format

+
+
+
Name
+
Russian
+
English
+
+
+
rangeShortDate (current month)
+
{{ ru.range.short.date.currentMonth }}
+
{{ en.range.short.date.currentMonth }}
+
+
+
rangeShortDate (not current month)
+
{{ ru.range.short.date.notCurrentYear }}
+
{{ en.range.short.date.notCurrentYear }}
+
+
+
rangeShortDate (start date is not in current year)
+
{{ ru.range.short.date.startsNotCurrentYear }}
+
{{ en.range.short.date.startsNotCurrentYear }}
+
+
+
rangeShortDate (end date is not in current year)
+
{{ ru.range.short.date.endsNotCurrentYear }}
+
{{ en.range.short.date.endsNotCurrentYear }}
+
+
+
rangeShortDateTime (the same day, current year)
+
{{ ru.range.short.dateTime.sameDateCurrentYear }}
+
{{ en.range.short.dateTime.sameDateCurrentYear }}
+
+
+
rangeShortDateTime (the same day, not current year)
+
{{ ru.range.short.dateTime.sameDateNotCurrentYear }}
+
{{ en.range.short.dateTime.sameDateNotCurrentYear }}
+
+
+
rangeShortDateTime (not current month)
+
{{ ru.range.short.dateTime.notCurrentMonth }}
+
{{ en.range.short.dateTime.notCurrentMonth }}
+
+
+
rangeShortDateTime (start date is not in current year)
+
{{ ru.range.short.dateTime.startsNotCurrentYear }}
+
{{ en.range.short.dateTime.startsNotCurrentYear }}
+
+
+
rangeShortDateTime (end date is not in current year)
+
{{ ru.range.short.dateTime.endsNotCurrentYear }}
+
{{ en.range.short.dateTime.endsNotCurrentYear }}
+
+
+
+
diff --git a/packages/mosaic-dev/dateformatter/module.ts b/packages/mosaic-dev/dateformatter/module.ts deleted file mode 100644 index 08570e179..000000000 --- a/packages/mosaic-dev/dateformatter/module.ts +++ /dev/null @@ -1,484 +0,0 @@ -// tslint:disable:no-console -// tslint:disable:no-magic-numbers -import { Component, NgModule, ViewEncapsulation, Inject } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { - DateAdapter, - MC_DATE_LOCALE -} from '@ptsecurity/cdk/datetime'; -import { - McMomentDateModule, - MomentDateAdapter -} from '@ptsecurity/mosaic-moment-adapter/adapter'; -import { McDatepickerModule } from '@ptsecurity/mosaic/datepicker'; -import { McFormFieldModule } from '@ptsecurity/mosaic/form-field'; -import { McIconModule } from '@ptsecurity/mosaic/icon'; -import { McInputModule } from '@ptsecurity/mosaic/input'; - -// Depending on whether rollup is used, moment needs to be imported differently. -// Since Moment.js doesn't have a default export, we normally need to import using the `* as` -// syntax. However, rollup creates a synthetic default module and we thus need to import it using -// the `default as` syntax. -// tslint:disable-next-line:ordered-imports -import * as _moment from 'moment'; -// tslint:disable-next-line:no-duplicate-imports -import { default as _rollupMoment, Moment } from 'moment'; - - -const moment = _rollupMoment || _moment; - -@Component({ - selector: 'app', - template: require('./template.html'), - styleUrls: ['./styles.scss'], - encapsulation: ViewEncapsulation.None, - providers: [ - {provide: MC_DATE_LOCALE, useValue: 'ru'}, - {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MC_DATE_LOCALE]} - ] -}) -export class DemoComponent { - // ABSOLUTE LONG - // ru - ruLongDateCurrentYear: string; - ruLongDateNotCurrentYear: string; - ruLongDateTimeCurrentYear: string; - ruLongDateTimeNotCurrentYear: string; - // en - enLongDateCurrentYear: string; - enLongDateNotCurrentYear: string; - enLongDateTimeCurrentYear: string; - enLongDateTimeNotCurrentYear: string; - - // ABSOLUTE SHORT - // ru - ruShortDateCurrentYear: string; - ruShortDateNotCurrentYear: string; - ruShortDateTimeCurrentYear: string; - ruShortDateTimeNotCurrentYear: string; - // en - enShortDateCurrentYear: string; - enShortDateNotCurrentYear: string; - enShortDateTimeCurrentYear: string; - enShortDateTimeNotCurrentYear: string; - - // RELATIVE LONG - // ru - ruRelativeLongSecondsAgo: string; - ruRelativeLongMinutesAgo: string; - ruRelativeLongToday: string; - ruRelativeLongYesterday: string; - ruRelativeLongBeforeYesterdayCurrentYear: string; - ruRelativeLongBeforeYesterdayNotCurrentYear: string; - // en - enRelativeLongSecondsAgo: string; - enRelativeLongMinutesAgo: string; - enRelativeLongToday: string; - enRelativeLongYesterday: string; - enRelativeLongBeforeYesterdayCurrentYear: string; - enRelativeLongBeforeYesterdayNotCurrentYear: string; - - // RELATIVE SHORT - // ru - ruRelativeShortSecondsAgo: string; - ruRelativeShortMinutesAgo: string; - ruRelativeShortToday: string; - ruRelativeShortYesterday: string; - ruRelativeShortBeforeYesterdayCurrentYear: string; - ruRelativeShortBeforeYesterdayNotCurrentYear: string; - // en - enRelativeShortSecondsAgo: string; - enRelativeShortMinutesAgo: string; - enRelativeShortToday: string; - enRelativeShortYesterday: string; - enRelativeShortBeforeYesterdayCurrentYear: string; - enRelativeShortBeforeYesterdayNotCurrentYear: string; - - // RANGE LONG - // ru - ruRangeLongCurrentMonth: string; - ruRangeLongDateNotCurrentYear: string; - ruRangeLongDateStartsNotCurrentYear: string; - ruRangeLongDateEndsNotCurrentYear: string; - ruRangeLongDateTimeSameDateCurrentYear: string; - ruRangeLongDateTimeSameDateNotCurrentYear: string; - ruRangeLongDateTimeNotCurrentMonth: string; - ruRangeLongDateTimeStartsNotCurrentYear: string; - ruRangeLongDateTimeEndsNotCurrentYear: string; - // en - enRangeLongCurrentMonth: string; - enRangeLongDateNotCurrentYear: string; - enRangeLongDateStartsNotCurrentYear: string; - enRangeLongDateEndsNotCurrentYear: string; - enRangeLongDateTimeSameDateCurrentYear: string; - enRangeLongDateTimeSameDateNotCurrentYear: string; - enRangeLongDateTimeNotCurrentMonth: string; - enRangeLongDateTimeStartsNotCurrentYear: string; - enRangeLongDateTimeEndsNotCurrentYear: string; - - // RANGE MIDDLE - // ru - ruRangeMiddleDateTimeCurrentYear: string; - ruRangeMiddleDateTimeSameDateCurrentYear: string; - ruRangeMiddleDateTimeSameDateNotCurrentYear: string; - ruRangeMiddleDateTimeNotCurrentMonth: string; - ruRangeMiddleDateTimeStartsNotCurrentYear: string; - ruRangeMiddleDateTimeEndsNotCurrentYear: string; - // en - enRangeMiddleDateTimeCurrentYear: string; - enRangeMiddleDateTimeSameDateCurrentYear: string; - enRangeMiddleDateTimeSameDateNotCurrentYear: string; - enRangeMiddleDateTimeNotCurrentMonth: string; - enRangeMiddleDateTimeStartsNotCurrentYear: string; - enRangeMiddleDateTimeEndsNotCurrentYear: string; - - // RANGE SHORT - // ru - ruRangeShortCurrentMonth: string; - ruRangeShortDateNotCurrentYear: string; - ruRangeShortDateStartsNotCurrentYear: string; - ruRangeShortDateEndsNotCurrentYear: string; - ruRangeShortDateTimeSameDateCurrentYear: string; - ruRangeShortDateTimeSameDateNotCurrentYear: string; - ruRangeShortDateTimeNotCurrentMonth: string; - ruRangeShortDateTimeStartsNotCurrentYear: string; - ruRangeShortDateTimeEndsNotCurrentYear: string; - // en - enRangeShortCurrentMonth: string; - enRangeShortDateNotCurrentYear: string; - enRangeShortDateStartsNotCurrentYear: string; - enRangeShortDateEndsNotCurrentYear: string; - enRangeShortDateTimeSameDateCurrentYear: string; - enRangeShortDateTimeSameDateNotCurrentYear: string; - enRangeShortDateTimeNotCurrentMonth: string; - enRangeShortDateTimeStartsNotCurrentYear: string; - enRangeShortDateTimeEndsNotCurrentYear: string; - - // tslint:disable-next-line:max-func-body-length - constructor(private dateAdapter: DateAdapter) { - this.populateRuLongDate(); - this.populateEnLongDate(); - - this.populateRuShortDate(); - this.populateEnShortDate(); - - this.populateRuRelativeLong(); - this.populateEnRelativeLong(); - - this.populateRuRelativeShort(); - this.populateEnRelativeShort(); - - this.populateRuRangeLong(); - this.populateEnRangeLong(); - - this.populateRuRangeMiddle(); - this.populateEnRangeMiddle(); - - this.populateRuRangeShort(); - this.populateEnRangeShort(); - } - - private populateEnRangeShort() { - this.dateAdapter.setLocale('en'); - this.enRangeShortCurrentMonth = this.dateAdapter.rangeShortDate(moment().date(1), moment().date(10)); - this.enRangeShortDateNotCurrentYear = this.dateAdapter.rangeShortDate( - moment().date(1).month(1), - moment().date(10).month(2) - ); - this.enRangeShortDateStartsNotCurrentYear = this.dateAdapter.rangeShortDate( - moment().date(1).month(1).subtract(1, 'years'), - moment().date(10).month(2) - ); - this.enRangeShortDateEndsNotCurrentYear = this.dateAdapter.rangeShortDate( - moment().date(1).month(1), - moment().date(10).month(2).add(1, 'years') - ); - this.enRangeShortDateTimeSameDateCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(10).hour(10).minutes(14), - moment().date(10).hour(11).minutes(28) - ); - this.enRangeShortDateTimeSameDateNotCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) - ); - this.enRangeShortDateTimeNotCurrentMonth = this.dateAdapter.rangeShortDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.enRangeShortDateTimeStartsNotCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.enRangeShortDateTimeEndsNotCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) - ); - } - - private populateRuRangeShort() { - this.dateAdapter.setLocale('ru'); - this.ruRangeShortCurrentMonth = this.dateAdapter.rangeShortDate(moment().date(1), moment().date(10)); - this.ruRangeShortDateNotCurrentYear = this.dateAdapter.rangeShortDate( - moment().date(1).month(1), - moment().date(10).month(2) - ); - this.ruRangeShortDateStartsNotCurrentYear = this.dateAdapter.rangeShortDate( - moment().date(1).month(1).subtract(1, 'years'), - moment().date(10).month(2) - ); - this.ruRangeShortDateEndsNotCurrentYear = this.dateAdapter.rangeShortDate( - moment().date(1).month(1), - moment().date(10).month(2).add(1, 'years') - ); - this.ruRangeShortDateTimeSameDateCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(10).hour(10).minutes(14), - moment().date(10).hour(11).minutes(28) - ); - this.ruRangeShortDateTimeSameDateNotCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) - ); - this.ruRangeShortDateTimeNotCurrentMonth = this.dateAdapter.rangeShortDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.ruRangeShortDateTimeStartsNotCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.ruRangeShortDateTimeEndsNotCurrentYear = this.dateAdapter.rangeShortDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) - ); - } - - private populateEnRangeMiddle() { - this.dateAdapter.setLocale('en'); - this.enRangeMiddleDateTimeCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(1), - moment().date(10) - ); - this.enRangeMiddleDateTimeSameDateCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(10).hour(10).minutes(14), - moment().date(10).hour(10).minutes(28) - ); - this.enRangeMiddleDateTimeSameDateNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) - ); - this.enRangeMiddleDateTimeNotCurrentMonth = this.dateAdapter.rangeMiddleDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.enRangeMiddleDateTimeStartsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(1).month(1).hour(11).minutes(28) - ); - this.enRangeMiddleDateTimeEndsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(1).add(1, 'years').hour(11).minutes(28) - ); - } - - private populateRuRangeMiddle() { - this.dateAdapter.setLocale('ru'); - this.ruRangeMiddleDateTimeCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(1), - moment().date(10) - ); - this.ruRangeMiddleDateTimeSameDateCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(10).hour(10).minutes(14), - moment().date(10).hour(10).minutes(28) - ); - this.ruRangeMiddleDateTimeSameDateNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) - ); - this.ruRangeMiddleDateTimeNotCurrentMonth = this.dateAdapter.rangeMiddleDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.ruRangeMiddleDateTimeStartsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(1).month(1).hour(11).minutes(28) - ); - this.ruRangeMiddleDateTimeEndsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(1).add(1, 'years').hour(11).minutes(28) - ); - } - - private populateEnRangeLong() { - this.dateAdapter.setLocale('en'); - this.enRangeLongCurrentMonth = this.dateAdapter.rangeLongDate(moment().date(1), moment().date(10)); - this.enRangeLongDateNotCurrentYear = this.dateAdapter.rangeLongDate( - moment().date(1).month(1), - moment().date(10).month(2) - ); - this.enRangeLongDateStartsNotCurrentYear = this.dateAdapter.rangeLongDate( - moment().date(1).month(1).subtract(1, 'years'), - moment().date(10).month(2) - ); - this.enRangeLongDateEndsNotCurrentYear = this.dateAdapter.rangeLongDate( - moment().date(1).month(1), - moment().date(10).month(2).add(1, 'years') - ); - this.enRangeLongDateTimeSameDateCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(10).hour(10).minutes(14), - moment().date(10).hour(11).minutes(28) - ); - this.enRangeLongDateTimeSameDateNotCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) - ); - this.enRangeLongDateTimeNotCurrentMonth = this.dateAdapter.rangeLongDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.enRangeLongDateTimeStartsNotCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.enRangeLongDateTimeEndsNotCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) - ); - } - - private populateRuRangeLong() { - this.dateAdapter.setLocale('ru'); - this.ruRangeLongCurrentMonth = this.dateAdapter.rangeLongDate(moment().date(1), moment().date(10)); - this.ruRangeLongDateNotCurrentYear = this.dateAdapter.rangeLongDate( - moment().date(1).month(1), - moment().date(10).month(2) - ); - this.ruRangeLongDateStartsNotCurrentYear = this.dateAdapter.rangeLongDate( - moment().date(1).month(1).subtract(1, 'years'), - moment().date(10).month(2) - ); - this.ruRangeLongDateEndsNotCurrentYear = this.dateAdapter.rangeLongDate( - moment().date(1).month(1), - moment().date(10).month(2).add(1, 'years') - ); - this.ruRangeLongDateTimeSameDateCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(10).hour(10).minutes(14), - moment().date(10).hour(11).minutes(28) - ); - this.ruRangeLongDateTimeSameDateNotCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) - ); - this.ruRangeLongDateTimeNotCurrentMonth = this.dateAdapter.rangeLongDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.ruRangeLongDateTimeStartsNotCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), - moment().date(1).month(2).hour(11).minutes(28) - ); - this.ruRangeLongDateTimeEndsNotCurrentYear = this.dateAdapter.rangeLongDateTime( - moment().date(1).month(1).hour(10).minutes(14), - moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) - ); - } - - private populateEnRelativeShort() { - this.dateAdapter.setLocale('en'); - this.enRelativeShortSecondsAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'seconds')); - this.enRelativeShortMinutesAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'minutes')); - this.enRelativeShortToday = this.dateAdapter.relativeShortDate(moment().subtract(1, 'hours')); - this.enRelativeShortYesterday = this.dateAdapter.relativeShortDate(moment().subtract(1, 'days')); - this.enRelativeShortBeforeYesterdayCurrentYear = - this.dateAdapter.relativeShortDate(moment().subtract(2, 'days')); - this.enRelativeShortBeforeYesterdayNotCurrentYear = - this.dateAdapter.relativeShortDate(moment().subtract(1, 'years').subtract(2, 'days')); - } - - private populateRuRelativeShort() { - this.dateAdapter.setLocale('ru'); - this.ruRelativeShortSecondsAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'seconds')); - this.ruRelativeShortMinutesAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'minutes')); - this.ruRelativeShortToday = this.dateAdapter.relativeShortDate(moment().subtract(1, 'hours')); - this.ruRelativeShortYesterday = this.dateAdapter.relativeShortDate(moment().subtract(1, 'days')); - this.ruRelativeShortBeforeYesterdayCurrentYear = - this.dateAdapter.relativeShortDate(moment().subtract(2, 'days')); - this.ruRelativeShortBeforeYesterdayNotCurrentYear = - this.dateAdapter.relativeShortDate(moment().subtract(1, 'years').subtract(2, 'days')); - } - - private populateEnRelativeLong() { - this.dateAdapter.setLocale('en'); - this.enRelativeLongSecondsAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'seconds')); - this.enRelativeLongMinutesAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'minutes')); - this.enRelativeLongToday = this.dateAdapter.relativeLongDate(moment().subtract(1, 'hours')); - this.enRelativeLongYesterday = this.dateAdapter.relativeLongDate(moment().subtract(1, 'days')); - this.enRelativeLongBeforeYesterdayCurrentYear = this.dateAdapter.relativeLongDate(moment().subtract(2, 'days')); - this.enRelativeLongBeforeYesterdayNotCurrentYear = - this.dateAdapter.relativeLongDate(moment().subtract(1, 'years').subtract(2, 'days')); - } - - private populateRuRelativeLong() { - this.dateAdapter.setLocale('ru'); - this.ruRelativeLongSecondsAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'seconds')); - this.ruRelativeLongMinutesAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'minutes')); - this.ruRelativeLongToday = this.dateAdapter.relativeLongDate(moment().subtract(1, 'hours')); - this.ruRelativeLongYesterday = this.dateAdapter.relativeLongDate(moment().subtract(1, 'days')); - this.ruRelativeLongBeforeYesterdayCurrentYear = this.dateAdapter.relativeLongDate(moment().subtract(2, 'days')); - this.ruRelativeLongBeforeYesterdayNotCurrentYear = - this.dateAdapter.relativeLongDate(moment().subtract(1, 'years').subtract(2, 'days')); - } - - private populateEnShortDate() { - this.dateAdapter.setLocale('en'); - this.enShortDateCurrentYear = this.dateAdapter.absoluteShortDate(moment()); - this.enShortDateNotCurrentYear = this.dateAdapter.absoluteShortDate(moment().subtract(1, 'years')); - this.enShortDateTimeCurrentYear = this.dateAdapter.absoluteShortDateTime(moment()); - this.enShortDateTimeNotCurrentYear = this.dateAdapter.absoluteShortDateTime(moment().subtract(1, 'years')); - } - - private populateRuShortDate() { - this.dateAdapter.setLocale('ru'); - this.ruShortDateCurrentYear = this.dateAdapter.absoluteShortDate(moment()); - this.ruShortDateNotCurrentYear = this.dateAdapter.absoluteShortDate(moment().subtract(1, 'years')); - this.ruShortDateTimeCurrentYear = this.dateAdapter.absoluteShortDateTime(moment()); - this.ruShortDateTimeNotCurrentYear = this.dateAdapter.absoluteShortDateTime(moment().subtract(1, 'years')); - } - - private populateEnLongDate() { - this.dateAdapter.setLocale('en'); - this.enLongDateCurrentYear = this.dateAdapter.absoluteLongDate(moment()); - this.enLongDateNotCurrentYear = this.dateAdapter.absoluteLongDate(moment().subtract(1, 'years')); - this.enLongDateTimeCurrentYear = this.dateAdapter.absoluteLongDateTime(moment()); - this.enLongDateTimeNotCurrentYear = this.dateAdapter.absoluteLongDateTime(moment().subtract(1, 'years')); - } - - private populateRuLongDate() { - this.dateAdapter.setLocale('ru'); - this.ruLongDateCurrentYear = this.dateAdapter.absoluteLongDate(moment()); - this.ruLongDateNotCurrentYear = this.dateAdapter.absoluteLongDate(moment().subtract(1, 'years')); - this.ruLongDateTimeCurrentYear = this.dateAdapter.absoluteLongDateTime(moment()); - this.ruLongDateTimeNotCurrentYear = this.dateAdapter.absoluteLongDateTime(moment().subtract(1, 'years')); - } -} - -@NgModule({ - declarations: [ - DemoComponent - ], - imports: [ - BrowserModule, - McMomentDateModule - ], - bootstrap: [ - DemoComponent - ], - providers: [] -}) -export class DemoModule {} - -platformBrowserDynamic() - .bootstrapModule(DemoModule) - .catch((error) => console.error(error)); diff --git a/packages/mosaic-dev/dateformatter/template.html b/packages/mosaic-dev/dateformatter/template.html deleted file mode 100644 index 03bd4d1cd..000000000 --- a/packages/mosaic-dev/dateformatter/template.html +++ /dev/null @@ -1,610 +0,0 @@ -
-

Absolute

- -
-

Long

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- absoluteLongDate (current year) -
-
- {{ruLongDateCurrentYear}} -
-
- {{enLongDateCurrentYear}} -
-
-
-
- absoluteLongDate (not current year) -
-
- {{ruLongDateNotCurrentYear}} -
-
- {{enLongDateNotCurrentYear}} -
-
-
-
- absoluteLongDateTime (current year) -
-
- {{ruLongDateTimeCurrentYear}} -
-
- {{enLongDateTimeCurrentYear}} -
-
-
-
- absoluteLongDateTime (not current year) -
-
- {{ruLongDateTimeNotCurrentYear}} -
-
- {{enLongDateTimeNotCurrentYear}} -
-
-
-
- -
-

Short

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- absoluteShortDate (current year) -
-
- {{ruShortDateCurrentYear}} -
-
- {{enShortDateCurrentYear}} -
-
-
-
- absoluteShortDate (not current year) -
-
- {{ruShortDateNotCurrentYear}} -
-
- {{enShortDateNotCurrentYear}} -
-
-
-
- absoluteShortDateTime (current year) -
-
- {{ruShortDateTimeCurrentYear}} -
-
- {{enShortDateTimeCurrentYear}} -
-
-
-
- absoluteShortDateTime (not current year) -
-
- {{ruShortDateTimeNotCurrentYear}} -
-
- {{enShortDateTimeNotCurrentYear}} -
-
-
-
- -

Relative

- -
-

Long

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- SecondsAgo -
-
- {{ruRelativeLongSecondsAgo}} -
-
- {{enRelativeLongSecondsAgo}} -
-
-
-
- MinutesAgo -
-
- {{ruRelativeLongMinutesAgo}} -
-
- {{enRelativeLongMinutesAgo}} -
-
-
-
- Today -
-
- {{ruRelativeLongToday}} -
-
- {{enRelativeLongToday}} -
-
-
-
- Yesterday -
-
- {{ruRelativeLongYesterday}} -
-
- {{enRelativeLongYesterday}} -
-
-
-
- Before yesterday (current year) -
-
- {{ruRelativeLongBeforeYesterdayCurrentYear}} -
-
- {{enRelativeLongBeforeYesterdayCurrentYear}} -
-
-
-
- Before yesterday (not current year) -
-
- {{ruRelativeLongBeforeYesterdayNotCurrentYear}} -
-
- {{enRelativeLongBeforeYesterdayNotCurrentYear}} -
-
-
-
- -
-

Short

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- SecondsAgo -
-
- {{ruRelativeShortSecondsAgo}} -
-
- {{enRelativeShortSecondsAgo}} -
-
-
-
- MinutesAgo -
-
- {{ruRelativeShortMinutesAgo}} -
-
- {{enRelativeShortMinutesAgo}} -
-
-
-
- Today -
-
- {{ruRelativeShortToday}} -
-
- {{enRelativeShortToday}} -
-
-
-
- Yesterday -
-
- {{ruRelativeShortYesterday}} -
-
- {{enRelativeShortYesterday}} -
-
-
-
- Before yesterday (current year) -
-
- {{ruRelativeShortBeforeYesterdayCurrentYear}} -
-
- {{enRelativeShortBeforeYesterdayCurrentYear}} -
-
-
-
- Before yesterday (not current year) -
-
- {{ruRelativeShortBeforeYesterdayNotCurrentYear}} -
-
- {{enRelativeShortBeforeYesterdayNotCurrentYear}} -
-
-
-
- -

Range

- -
-

Long

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- rangeLongDate (current month) -
-
- {{ruRangeLongCurrentMonth}} -
-
- {{enRangeLongCurrentMonth}} -
-
-
-
- rangeLongDate (not current month) -
-
- {{ruRangeLongDateNotCurrentYear}} -
-
- {{enRangeLongDateNotCurrentYear}} -
-
-
-
- rangeLongDate (start date is not in current year) -
-
- {{ruRangeLongDateStartsNotCurrentYear}} -
-
- {{enRangeLongDateStartsNotCurrentYear}} -
-
-
-
- rangeLongDate (end date is not in current year) -
-
- {{ruRangeLongDateEndsNotCurrentYear}} -
-
- {{enRangeLongDateEndsNotCurrentYear}} -
-
-
-
- rangeLongDateTime (the same day, current year) -
-
- {{ruRangeLongDateTimeSameDateCurrentYear}} -
-
- {{enRangeLongDateTimeSameDateCurrentYear}} -
-
-
-
- rangeLongDateTime (the same day, not current year) -
-
- {{ruRangeLongDateTimeSameDateNotCurrentYear}} -
-
- {{enRangeLongDateTimeSameDateNotCurrentYear}} -
-
-
-
- rangeLongDateTime (not current month) -
-
- {{ruRangeLongDateTimeNotCurrentMonth}} -
-
- {{enRangeLongDateTimeNotCurrentMonth}} -
-
-
-
- rangeLongDateTime (start date is not in current year) -
-
- {{ruRangeLongDateTimeStartsNotCurrentYear}} -
-
- {{enRangeLongDateTimeStartsNotCurrentYear}} -
-
-
-
- rangeLongDateTime (end date is not in current year) -
-
- {{ruRangeLongDateTimeEndsNotCurrentYear}} -
-
- {{enRangeLongDateTimeEndsNotCurrentYear}} -
-
-
-
- -
-

Middle

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- rangeMiddleDateTime -
-
- {{ruRangeMiddleDateTimeCurrentYear}} -
-
- {{enRangeMiddleDateTimeCurrentYear}} -
-
-
-
- rangeMiddleDateTime (the same day) -
-
- {{ruRangeMiddleDateTimeSameDateCurrentYear}} -
-
- {{enRangeMiddleDateTimeSameDateCurrentYear}} -
-
-
-
- rangeMiddleDateTime (the same day, not current year) -
-
- {{ruRangeMiddleDateTimeSameDateNotCurrentYear}} -
-
- {{enRangeMiddleDateTimeSameDateNotCurrentYear}} -
-
-
-
- rangeMiddleDateTime (not current month) -
-
- {{ruRangeMiddleDateTimeNotCurrentMonth}} -
-
- {{enRangeMiddleDateTimeNotCurrentMonth}} -
-
-
-
- rangeMiddleDateTime (start date is not in current year) -
-
- {{ruRangeMiddleDateTimeStartsNotCurrentYear}} -
-
- {{enRangeMiddleDateTimeStartsNotCurrentYear}} -
-
-
-
- rangeMiddleDateTime (end date is not in current year) -
-
- {{ruRangeMiddleDateTimeEndsNotCurrentYear}} -
-
- {{enRangeMiddleDateTimeEndsNotCurrentYear}} -
-
-
-
- -
-

Short

-
-
-
- Name -
-
- Russian -
-
- English -
-
-
-
- rangeShortDate (current month) -
-
- {{ruRangeShortCurrentMonth}} -
-
- {{enRangeShortCurrentMonth}} -
-
-
-
- rangeShortDate (not current month) -
-
- {{ruRangeShortDateNotCurrentYear}} -
-
- {{enRangeShortDateNotCurrentYear}} -
-
-
-
- rangeShortDate (start date is not in current year) -
-
- {{ruRangeShortDateStartsNotCurrentYear}} -
-
- {{enRangeShortDateStartsNotCurrentYear}} -
-
-
-
- rangeShortDate (end date is not in current year) -
-
- {{ruRangeShortDateEndsNotCurrentYear}} -
-
- {{enRangeShortDateEndsNotCurrentYear}} -
-
-
-
- rangeShortDateTime (the same day, current year) -
-
- {{ruRangeShortDateTimeSameDateCurrentYear}} -
-
- {{enRangeShortDateTimeSameDateCurrentYear}} -
-
-
-
- rangeShortDateTime (the same day, not current year) -
-
- {{ruRangeShortDateTimeSameDateNotCurrentYear}} -
-
- {{enRangeShortDateTimeSameDateNotCurrentYear}} -
-
-
-
- rangeShortDateTime (not current month) -
-
- {{ruRangeShortDateTimeNotCurrentMonth}} -
-
- {{enRangeShortDateTimeNotCurrentMonth}} -
-
-
-
- rangeShortDateTime (start date is not in current year) -
-
- {{ruRangeShortDateTimeStartsNotCurrentYear}} -
-
- {{enRangeShortDateTimeStartsNotCurrentYear}} -
-
-
-
- rangeShortDateTime (end date is not in current year) -
-
- {{ruRangeShortDateTimeEndsNotCurrentYear}} -
-
- {{enRangeShortDateTimeEndsNotCurrentYear}} -
-
-
-
-
diff --git a/packages/mosaic-dev/formatters/demo-template.html b/packages/mosaic-dev/formatters/demo-template.html deleted file mode 100644 index 53596e09f..000000000 --- a/packages/mosaic-dev/formatters/demo-template.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
-

with RU locale (default)

- -
- -
-

with EN locale

- -
-
diff --git a/packages/mosaic-dev/formatters/formatters-template.html b/packages/mosaic-dev/formatters/formatters-template.html deleted file mode 100644 index f5e42ec26..000000000 --- a/packages/mosaic-dev/formatters/formatters-template.html +++ /dev/null @@ -1,59 +0,0 @@ -rawNumber: {{ rawNumber }} - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParamsNumber
-{{ rawNumber | mcNumber }}
digitsInfo: '5.5-5'{{ rawNumber | mcNumber: '5.5-5' }}
digitsInfo: '4.5-5'{{ rawNumber | mcNumber: '4.5-5' }}
digitsInfo: '4.0-2'{{ rawNumber | mcNumber: '4.0-2' }}
digitsInfo: '4.0-1'{{ rawNumber | mcNumber: '4.0-1' }}
digitsInfo: '4.0-0'{{ rawNumber | mcNumber: '4.0-0' }}
-{{ 10000 | mcNumber }}
-{{ 1000000 | mcNumber }}
-{{ 10000000 | mcNumber }}
-{{ 100000000 | mcNumber }}
locale {{ locale }}{{ 1000 | mcNumber: '' : locale }}
diff --git a/packages/mosaic-dev/formatters/styles.scss b/packages/mosaic-dev/formatters/styles.scss deleted file mode 100644 index e4d9f315c..000000000 --- a/packages/mosaic-dev/formatters/styles.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../mosaic/core/visual/prebuilt/default-visual'; - -@import '../../mosaic/core/theming/prebuilt/default-theme'; -//@import '../../mosaic/core/theming/prebuilt/dark-theme'; - -ru-locale, -en-locale { - display: block; -} - -table { - tr { - td { - width: 150px; - } - } -} - diff --git a/packages/mosaic-dev/number-formatter/demo-template.html b/packages/mosaic-dev/number-formatter/demo-template.html new file mode 100644 index 000000000..00bbe7026 --- /dev/null +++ b/packages/mosaic-dev/number-formatter/demo-template.html @@ -0,0 +1,15 @@ + + + + +
+
+

with RU locale (default)

+ +
+ +
+

with EN locale

+ +
+
diff --git a/packages/mosaic-dev/number-formatter/formatters-template.html b/packages/mosaic-dev/number-formatter/formatters-template.html new file mode 100644 index 000000000..93948505a --- /dev/null +++ b/packages/mosaic-dev/number-formatter/formatters-template.html @@ -0,0 +1,57 @@ +
+ {{ mcLocaleId | json }} +
+ +
+
+
+
Params
+
Formatted value
+
+ +
+
-
+
{{ value | mcNumber }}
+
+
+
digitsInfo: '5.5-5'
+
{{ value | mcNumber: '5.5-5' }}
+
+
+
digitsInfo: '4.5-5'
+
{{ value | mcNumber: '4.5-5' }}
+
+
+
digitsInfo: '4.0-2'
+
{{ value | mcNumber: '4.0-2' }}
+
+
+
digitsInfo: '4.0-1'
+
{{ value | mcNumber: '4.0-1' }}
+
+
+
digitsInfo: '4.0-0'
+
{{ value | mcNumber: '4.0-0' }}
+
+
+
-
+
{{ 10000 | mcNumber }}
+
+
+
-
+
{{ 1000000 | mcNumber }}
+
+
+
-
+
{{ 10000000 | mcNumber }}
+
+
+
-
+
{{ 100000000 | mcNumber }}
+
+
+
locale {{ locale }}
+
{{ 1000 | mcNumber: '' : locale }}
+
+
+
diff --git a/packages/mosaic-dev/formatters/module.ts b/packages/mosaic-dev/number-formatter/module.ts similarity index 65% rename from packages/mosaic-dev/formatters/module.ts rename to packages/mosaic-dev/number-formatter/module.ts index 3cae8fd23..58f7d5432 100644 --- a/packages/mosaic-dev/formatters/module.ts +++ b/packages/mosaic-dev/number-formatter/module.ts @@ -1,9 +1,13 @@ /* tslint:disable:naming-convention */ // tslint:disable:no-console -import { Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, Input, NgModule, Optional, ViewEncapsulation } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { MC_LOCALE_ID, McFormattersModule } from '@ptsecurity/mosaic/core/formatters'; +import { McFormFieldModule } from '@ptsecurity/mosaic/form-field'; +import { McIconModule } from '@ptsecurity/mosaic/icon'; +import { McInputModule } from '@ptsecurity/mosaic/input'; @Component({ @@ -13,17 +17,21 @@ import { MC_LOCALE_ID, McFormattersModule } from '@ptsecurity/mosaic/core/format encapsulation: ViewEncapsulation.None }) export class DemoComponent { - rawNumber = 1000.111; + value = 1000.123; } + @Component({ selector: 'ru-locale', template: require('./formatters-template.html'), encapsulation: ViewEncapsulation.None }) export class WithRULocaleComponent { - rawNumber = 1000.111; locale = 'en'; + + @Input() value: number = 0; + + constructor(@Optional() @Inject(MC_LOCALE_ID) public mcLocaleId: string) {} } @Component({ @@ -33,21 +41,28 @@ export class WithRULocaleComponent { providers: [{ provide: MC_LOCALE_ID, useValue: 'en' }] }) export class WithENLocaleComponent { - rawNumber = 1000.111; locale = 'ru'; + + @Input() value: number = 0; + + constructor(@Inject(MC_LOCALE_ID) public mcLocaleId: string) {} } @NgModule({ + imports: [ + BrowserModule, + McFormattersModule, + McInputModule, + McFormFieldModule, + FormsModule, + McIconModule + ], declarations: [ DemoComponent, WithRULocaleComponent, WithENLocaleComponent ], - imports: [ - BrowserModule, - McFormattersModule - ], bootstrap: [ DemoComponent ] diff --git a/packages/mosaic-dev/number-formatter/styles.scss b/packages/mosaic-dev/number-formatter/styles.scss new file mode 100644 index 000000000..ec8f910eb --- /dev/null +++ b/packages/mosaic-dev/number-formatter/styles.scss @@ -0,0 +1,30 @@ +@import '../../mosaic/core/visual/prebuilt/default-visual'; + +@import '../../mosaic/core/theming/prebuilt/default-theme'; +//@import '../../mosaic/core/theming/prebuilt/dark-theme'; + +ru-locale, +en-locale { + display: block; +} + +.number-input { + margin-top: 32px; + margin-bottom: 32px; + + max-width: 200px; +} + +.common-container { + padding-left: 16px; + padding-right: 16px; +} + +.light-text-secondary { + color: #CCC; +} + +.row-border { + padding: 8px; + border-bottom: 1px solid #CCC; +} diff --git a/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.css b/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.css new file mode 100644 index 000000000..c16d343f1 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.css @@ -0,0 +1,8 @@ +.light-text-secondary { + color: #CCC; +} + +.row-border { + padding: 8px; + border-bottom: 1px solid #CCC; +} diff --git a/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.html b/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.html new file mode 100644 index 000000000..70a682344 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.html @@ -0,0 +1,62 @@ +
+
+

Long format

+
+
+
Name
+
Russian
+
English
+
+
+
absoluteLongDate (current year)
+
{{ formats.ru.absolute.long.date.currentYear }}
+
{{ formats.en.absolute.long.date.currentYear }}
+
+
+
absoluteLongDate (not current year)
+
{{ formats.ru.absolute.long.date.notCurrentYear }}
+
{{ formats.en.absolute.long.date.notCurrentYear }}
+
+
+
absoluteLongDateTime (current year)
+
{{ formats.ru.absolute.long.dateTime.currentYear }}
+
{{ formats.en.absolute.long.dateTime.currentYear }}
+
+
+
absoluteLongDateTime (not current year)
+
{{ formats.ru.absolute.long.dateTime.notCurrentYear }}
+
{{ formats.en.absolute.long.dateTime.notCurrentYear }}
+
+
+
+
+

Short format

+
+
+
Name
+
Russian
+
English
+
+
+
absoluteShortDate (current year)
+
{{ formats.ru.absolute.short.date.currentYear }}
+
{{ formats.en.absolute.short.date.currentYear }}
+
+
+
absoluteShortDate (not current year)
+
{{ formats.ru.absolute.short.date.notCurrentYear }}
+
{{ formats.en.absolute.short.date.notCurrentYear }}
+
+
+
absoluteShortDateTime (current year)
+
{{ formats.ru.absolute.short.dateTime.currentYear }}
+
{{ formats.en.absolute.short.dateTime.currentYear }}
+
+
+
absoluteShortDateTime (not current year)
+
{{ formats.ru.absolute.short.dateTime.notCurrentYear }}
+
{{ formats.en.absolute.short.dateTime.notCurrentYear }}
+
+
+
+
diff --git a/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.ts b/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.ts new file mode 100644 index 000000000..bdb4dd4c7 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/absolute-date-formatter/absolute-date-formatter-example.ts @@ -0,0 +1,91 @@ +/* tslint:disable:no-magic-numbers */ +import { Component } from '@angular/core'; +import { DateAdapter, MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime'; +import { MomentDateAdapter } from '@ptsecurity/mosaic-moment-adapter'; + +// Depending on whether rollup is used, moment needs to be imported differently. +// Since Moment.js doesn't have a default export, we normally need to import using the `* as` +// syntax. However, rollup creates a synthetic default module and we thus need to import it using +// the `default as` syntax. +// tslint:disable-next-line:ordered-imports +import * as _moment from 'moment'; +// tslint:disable-next-line:no-duplicate-imports +import { default as _rollupMoment, Moment } from 'moment'; + + +const moment = _rollupMoment || _moment; + +/** + * @title Basic progress absolute-date-formatter + */ +@Component({ + selector: 'absolute-date-formatter-example', + templateUrl: 'absolute-date-formatter-example.html', + styleUrls: ['absolute-date-formatter-example.css'], + providers: [ + { provide: MC_DATE_LOCALE, useValue: 'ru' }, + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MC_DATE_LOCALE] } + ] +}) +export class AbsoluteDateFormatterExample { + formats: any = { + ru: { + absolute: { + long: { + date: {}, + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + } + }, + en: { + absolute: { + long: { + date: {}, + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + } + } + }; + + constructor(private dateAdapter: DateAdapter) { + this.populateAbsoluteLong('ru'); + this.populateAbsoluteLong('en'); + + this.populateAbsoluteShort('ru'); + this.populateAbsoluteShort('en'); + } + + private populateAbsoluteShort(locale: string) { + this.dateAdapter.setLocale(locale); + + const absoluteShort = this.formats[locale].absolute.short; + + absoluteShort.date.currentYear = this.dateAdapter.absoluteShortDate(moment()); + absoluteShort.date.notCurrentYear = this.dateAdapter.absoluteShortDate(moment().subtract(1, 'years')); + absoluteShort.dateTime.currentYear = this.dateAdapter.absoluteShortDateTime(moment()); + absoluteShort.dateTime.notCurrentYear = this.dateAdapter.absoluteShortDateTime( + moment().subtract(1, 'years') + ); + } + + private populateAbsoluteLong(locale: string) { + this.dateAdapter.setLocale(locale); + + const absoluteLong = this.formats[locale].absolute.long; + + absoluteLong.date.currentYear = this.dateAdapter.absoluteLongDate(moment()); + absoluteLong.date.notCurrentYear = this.dateAdapter.absoluteLongDate(moment().subtract(1, 'years')); + absoluteLong.dateTime.currentYear = this.dateAdapter.absoluteLongDateTime(moment()); + absoluteLong.dateTime.notCurrentYear = this.dateAdapter.absoluteLongDateTime( + moment().subtract(1, 'years') + ); + } +} diff --git a/packages/mosaic-examples/mosaic/date-formatter/module.ts b/packages/mosaic-examples/mosaic/date-formatter/module.ts new file mode 100644 index 000000000..b134e7fbf --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/module.ts @@ -0,0 +1,21 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { McMomentDateModule } from '@ptsecurity/mosaic-moment-adapter'; + +import { AbsoluteDateFormatterExample } from './absolute-date-formatter/absolute-date-formatter-example'; +import { RangeDateFormatterExample } from './range-date-formatter/range-date-formatter-example'; +import { RelativeDateFormatterExample } from './relative-date-formatter/relative-date-formatter-example'; + + +const EXAMPLES = [ + AbsoluteDateFormatterExample, + RelativeDateFormatterExample, + RangeDateFormatterExample +]; + +@NgModule({ + imports: [CommonModule, McMomentDateModule], + declarations: EXAMPLES, + exports: EXAMPLES +}) +export class DateFormatterExamplesModule {} diff --git a/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.css b/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.css new file mode 100644 index 000000000..c16d343f1 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.css @@ -0,0 +1,8 @@ +.light-text-secondary { + color: #CCC; +} + +.row-border { + padding: 8px; + border-bottom: 1px solid #CCC; +} diff --git a/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.html b/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.html new file mode 100644 index 000000000..580b86fb8 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.html @@ -0,0 +1,152 @@ +
+
+

Long format

+
+
+
Name
+
Russian
+
English
+
+
+
rangeLongDate (current month)
+
{{ formats.ru.range.long.date.currentMonth }}
+
{{ formats.en.range.long.date.currentMonth }}
+
+
+
rangeLongDate (not current month)
+
{{ formats.ru.range.long.date.notCurrentYear }}
+
{{ formats.en.range.long.date.notCurrentYear }}
+
+
+
rangeLongDate (start date is not in current year)
+
{{ formats.ru.range.long.date.startsNotCurrentYear }}
+
{{ formats.en.range.long.date.startsNotCurrentYear }}
+
+
+
rangeLongDate (end date is not in current year)
+
{{ formats.ru.range.long.date.endsNotCurrentYear }}
+
{{ formats.en.range.long.date.endsNotCurrentYear }}
+
+
+
rangeLongDateTime (the same day, current year)
+
{{ formats.ru.range.long.dateTime.sameDateCurrentYear }}
+
{{ formats.en.range.long.dateTime.sameDateCurrentYear }}
+
+
+
rangeLongDateTime (the same day, not current year)
+
{{ formats.ru.range.long.dateTime.sameDateNotCurrentYear }}
+
{{ formats.en.range.long.dateTime.sameDateNotCurrentYear }}
+
+
+
rangeLongDateTime (not current month)
+
{{ formats.ru.range.long.dateTime.notCurrentMonth }}
+
{{ formats.en.range.long.dateTime.notCurrentMonth }}
+
+
+
rangeLongDateTime (start date is not in current year)
+
{{ formats.ru.range.long.dateTime.startsNotCurrentYear }}
+
{{ formats.en.range.long.dateTime.startsNotCurrentYear }}
+
+
+
rangeLongDateTime (end date is not in current year)
+
{{ formats.ru.range.long.dateTime.endsNotCurrentYear }}
+
{{ formats.en.range.long.dateTime.endsNotCurrentYear }}
+
+
+
+
+

Middle format

+
+
+
Name
+
Russian
+
English
+
+
+
rangeMiddleDateTime
+
{{ formats.ru.range.middle.dateTime.currentYear }}
+
{{ formats.en.range.middle.dateTime.currentYear }}
+
+
+
rangeMiddleDateTime (the same day)
+
{{ formats.ru.range.middle.dateTime.sameDateCurrentYear }}
+
{{ formats.en.range.middle.dateTime.sameDateCurrentYear }}
+
+
+
rangeMiddleDateTime (the same day, not current year)
+
{{ formats.ru.range.middle.dateTime.sameDateNotCurrentYear }}
+
{{ formats.en.range.middle.dateTime.sameDateNotCurrentYear }}
+
+
+
rangeMiddleDateTime (not current month)
+
{{ formats.ru.range.middle.dateTime.notCurrentMonth }}
+
{{ formats.en.range.middle.dateTime.notCurrentMonth }}
+
+
+
rangeMiddleDateTime (start date is not in current year)
+
{{ formats.ru.range.middle.dateTime.startsNotCurrentYear }}
+
{{ formats.en.range.middle.dateTime.startsNotCurrentYear }}
+
+
+
rangeMiddleDateTime (end date is not in current year)
+
{{ formats.ru.range.middle.dateTime.endsNotCurrentYear }}
+
{{ formats.en.range.middle.dateTime.endsNotCurrentYear }}
+
+
+
+
+

Short format

+
+
+
Name
+
Russian
+
English
+
+
+
rangeShortDate (current month)
+
{{ formats.ru.range.short.date.currentMonth }}
+
{{ formats.en.range.short.date.currentMonth }}
+
+
+
rangeShortDate (not current month)
+
{{ formats.ru.range.short.date.notCurrentYear }}
+
{{ formats.en.range.short.date.notCurrentYear }}
+
+
+
rangeShortDate (start date is not in current year)
+
{{ formats.ru.range.short.date.startsNotCurrentYear }}
+
{{ formats.en.range.short.date.startsNotCurrentYear }}
+
+
+
rangeShortDate (end date is not in current year)
+
{{ formats.ru.range.short.date.endsNotCurrentYear }}
+
{{ formats.en.range.short.date.endsNotCurrentYear }}
+
+
+
rangeShortDateTime (the same day, current year)
+
{{ formats.ru.range.short.dateTime.sameDateCurrentYear }}
+
{{ formats.en.range.short.dateTime.sameDateCurrentYear }}
+
+
+
rangeShortDateTime (the same day, not current year)
+
{{ formats.ru.range.short.dateTime.sameDateNotCurrentYear }}
+
{{ formats.en.range.short.dateTime.sameDateNotCurrentYear }}
+
+
+
rangeShortDateTime (not current month)
+
{{ formats.ru.range.short.dateTime.notCurrentMonth }}
+
{{ formats.en.range.short.dateTime.notCurrentMonth }}
+
+
+
rangeShortDateTime (start date is not in current year)
+
{{ formats.ru.range.short.dateTime.startsNotCurrentYear }}
+
{{ formats.en.range.short.dateTime.startsNotCurrentYear }}
+
+
+
rangeShortDateTime (end date is not in current year)
+
{{ formats.ru.range.short.dateTime.endsNotCurrentYear }}
+
{{ formats.en.range.short.dateTime.endsNotCurrentYear }}
+
+
+
+
diff --git a/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.ts b/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.ts new file mode 100644 index 000000000..b6b6c2d62 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/range-date-formatter/range-date-formatter-example.ts @@ -0,0 +1,184 @@ +/* tslint:disable:no-magic-numbers */ +import { Component } from '@angular/core'; +import { DateAdapter, MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime'; +import { MomentDateAdapter } from '@ptsecurity/mosaic-moment-adapter'; + +// Depending on whether rollup is used, moment needs to be imported differently. +// Since Moment.js doesn't have a default export, we normally need to import using the `* as` +// syntax. However, rollup creates a synthetic default module and we thus need to import it using +// the `default as` syntax. +// tslint:disable-next-line:ordered-imports +import * as _moment from 'moment'; +// tslint:disable-next-line:no-duplicate-imports +import { default as _rollupMoment, Moment } from 'moment'; + + +const moment = _rollupMoment || _moment; + +/** + * @title Basic progress range-date-formatter + */ +@Component({ + selector: 'range-date-formatter-example', + templateUrl: 'range-date-formatter-example.html', + styleUrls: ['range-date-formatter-example.css'], + providers: [ + { provide: MC_DATE_LOCALE, useValue: 'ru' }, + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MC_DATE_LOCALE] } + ] +}) +export class RangeDateFormatterExample { + formats: any = { + ru: { + range: { + long: { + date: {}, + dateTime: {} + }, + middle: { + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + } + }, + en: { + range: { + long: { + date: {}, + dateTime: {} + }, + middle: { + dateTime: {} + }, + short: { + date: {}, + dateTime: {} + } + } + } + }; + + constructor(private dateAdapter: DateAdapter) { + this.populateRangeLong('ru'); + this.populateRangeLong('en'); + + this.populateRangeMiddle('ru'); + this.populateRangeMiddle('en'); + + this.populateRangeShort('ru'); + this.populateRangeShort('en'); + } + + private populateRangeShort(locale: string) { + this.dateAdapter.setLocale(locale); + + const shortRange = this.formats[locale].range.short; + + shortRange.date.currentMonth = this.dateAdapter.rangeShortDate(moment().date(1), moment().date(10)); + shortRange.date.notCurrentYear = this.dateAdapter.rangeShortDate( + moment().date(1).month(1), + moment().date(10).month(2) + ); + shortRange.date.startsNotCurrentYear = this.dateAdapter.rangeShortDate( + moment().date(1).month(1).subtract(1, 'years'), + moment().date(10).month(2) + ); + shortRange.date.endsNotCurrentYear = this.dateAdapter.rangeShortDate( + moment().date(1).month(1), + moment().date(10).month(2).add(1, 'years') + ); + shortRange.dateTime.sameDateCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(10).hour(10).minutes(14), + moment().date(10).hour(11).minutes(28) + ); + shortRange.dateTime.sameDateNotCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) + ); + shortRange.dateTime.notCurrentMonth = this.dateAdapter.rangeShortDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + shortRange.dateTime.startsNotCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + shortRange.dateTime.endsNotCurrentYear = this.dateAdapter.rangeShortDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) + ); + } + + private populateRangeMiddle(locale: string) { + this.dateAdapter.setLocale(locale); + + const middleRange = this.formats[locale].range.middle; + + middleRange.dateTime.currentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(1), moment().date(10) + ); + middleRange.dateTime.sameDateCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(10).hour(10).minutes(14), + moment().date(10).hour(10).minutes(28) + ); + middleRange.dateTime.sameDateNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) + ); + middleRange.dateTime.notCurrentMonth = this.dateAdapter.rangeMiddleDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + middleRange.dateTime.startsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(1).month(1).hour(11).minutes(28) + ); + middleRange.dateTime.endsNotCurrentYear = this.dateAdapter.rangeMiddleDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(1).add(1, 'years').hour(11).minutes(28) + ); + } + + private populateRangeLong(locale: string) { + this.dateAdapter.setLocale(locale); + + const longRange = this.formats[locale].range.long; + + longRange.date.currentMonth = this.dateAdapter.rangeLongDate(moment().date(1), moment().date(10)); + longRange.date.notCurrentYear = this.dateAdapter.rangeLongDate( + moment().date(1).month(1), + moment().date(10).month(2) + ); + longRange.date.startsNotCurrentYear = this.dateAdapter.rangeLongDate( + moment().date(1).month(1).subtract(1, 'years'), + moment().date(10).month(2) + ); + longRange.date.endsNotCurrentYear = this.dateAdapter.rangeLongDate( + moment().date(1).month(1), + moment().date(10).month(2).add(1, 'years') + ); + longRange.dateTime.sameDateCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(10).hour(10).minutes(14), + moment().date(10).hour(11).minutes(28) + ); + longRange.dateTime.sameDateNotCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(11).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(11).month(1).subtract(1, 'years').hour(11).minutes(28) + ); + longRange.dateTime.notCurrentMonth = this.dateAdapter.rangeLongDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + longRange.dateTime.startsNotCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(1).month(1).subtract(1, 'years').hour(10).minutes(14), + moment().date(1).month(2).hour(11).minutes(28) + ); + longRange.dateTime.endsNotCurrentYear = this.dateAdapter.rangeLongDateTime( + moment().date(1).month(1).hour(10).minutes(14), + moment().date(1).month(2).add(1, 'years').hour(11).minutes(28) + ); + } +} diff --git a/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.css b/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.css new file mode 100644 index 000000000..c16d343f1 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.css @@ -0,0 +1,8 @@ +.light-text-secondary { + color: #CCC; +} + +.row-border { + padding: 8px; + border-bottom: 1px solid #CCC; +} diff --git a/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.html b/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.html new file mode 100644 index 000000000..ca9ddbf3a --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.html @@ -0,0 +1,82 @@ +
+
+

Long format

+
+
+
Name
+
Russian
+
English
+
+
+
SecondsAgo
+
{{ formats.ru.relative.long.secondsAgo }}
+
{{ formats.en.relative.long.secondsAgo }}
+
+
+
MinutesAgo
+
{{ formats.ru.relative.long.minutesAgo }}
+
{{ formats.en.relative.long.minutesAgo }}
+
+
+
Today
+
{{ formats.ru.relative.long.today }}
+
{{ formats.en.relative.long.today }}
+
+
+
Yesterday
+
{{ formats.ru.relative.long.yesterday }}
+
{{ formats.en.relative.long.yesterday }}
+
+
+
Before yesterday (current year)
+
{{ formats.ru.relative.long.beforeYesterdayCurrentYear }}
+
{{ formats.en.relative.long.beforeYesterdayCurrentYear }}
+
+
+
Before yesterday (not current year)
+
{{ formats.ru.relative.long.beforeYesterdayNotCurrentYear }}
+
{{ formats.en.relative.long.beforeYesterdayNotCurrentYear }}
+
+
+
+
+

Short format

+
+
+
Name
+
Russian
+
English
+
+
+
SecondsAgo
+
{{ formats.ru.relative.short.secondsAgo }}
+
{{ formats.en.relative.short.secondsAgo }}
+
+
+
MinutesAgo
+
{{ formats.ru.relative.short.minutesAgo }}
+
{{ formats.en.relative.short.minutesAgo }}
+
+
+
Today
+
{{ formats.ru.relative.short.today }}
+
{{ formats.en.relative.short.today }}
+
+
+
Yesterday
+
{{ formats.ru.relative.short.yesterday }}
+
{{ formats.en.relative.short.yesterday }}
+
+
+
Before yesterday (current year)
+
{{ formats.ru.relative.short.beforeYesterdayCurrentYear }}
+
{{ formats.en.relative.short.beforeYesterdayCurrentYear }}
+
+
+
Before yesterday (not current year)
+
{{ formats.ru.relative.short.beforeYesterdayNotCurrentYear }}
+
{{ formats.en.relative.short.beforeYesterdayNotCurrentYear }}
+
+
+
+
diff --git a/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.ts b/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.ts new file mode 100644 index 000000000..1d0ca54f0 --- /dev/null +++ b/packages/mosaic-examples/mosaic/date-formatter/relative-date-formatter/relative-date-formatter-example.ts @@ -0,0 +1,87 @@ +/* tslint:disable:no-magic-numbers */ +import { Component } from '@angular/core'; +import { DateAdapter, MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime'; +import { MomentDateAdapter } from '@ptsecurity/mosaic-moment-adapter'; + +// Depending on whether rollup is used, moment needs to be imported differently. +// Since Moment.js doesn't have a default export, we normally need to import using the `* as` +// syntax. However, rollup creates a synthetic default module and we thus need to import it using +// the `default as` syntax. +// tslint:disable-next-line:ordered-imports +import * as _moment from 'moment'; +// tslint:disable-next-line:no-duplicate-imports +import { default as _rollupMoment, Moment } from 'moment'; + + +const moment = _rollupMoment || _moment; + +/** + * @title Basic progress relative-date-formatter + */ +@Component({ + selector: 'relative-date-formatter-example', + templateUrl: 'relative-date-formatter-example.html', + styleUrls: ['relative-date-formatter-example.css'], + providers: [ + { provide: MC_DATE_LOCALE, useValue: 'ru' }, + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MC_DATE_LOCALE] } + ] +}) +export class RelativeDateFormatterExample { + formats: any = { + ru: { + relative: { + long: {}, + short: {} + } + }, + en: { + relative: { + long: {}, + short: {} + } + } + }; + + constructor(private dateAdapter: DateAdapter) { + this.populateRelativeLong('ru'); + this.populateRelativeLong('en'); + + this.populateRelativeShort('ru'); + this.populateRelativeShort('en'); + } + + private populateRelativeShort(locale: string) { + this.dateAdapter.setLocale(locale); + + const relativeShort = this.formats[locale].relative.short; + + relativeShort.secondsAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'seconds')); + relativeShort.minutesAgo = this.dateAdapter.relativeShortDate(moment().subtract(1, 'minutes')); + relativeShort.today = this.dateAdapter.relativeShortDate(moment().subtract(1, 'hours')); + relativeShort.yesterday = this.dateAdapter.relativeShortDate(moment().subtract(1, 'days')); + relativeShort.beforeYesterdayCurrentYear = this.dateAdapter.relativeShortDate( + moment().subtract(2, 'days') + ); + relativeShort.beforeYesterdayNotCurrentYear = this.dateAdapter.relativeShortDate( + moment().subtract(1, 'years').subtract(2, 'days') + ); + } + + private populateRelativeLong(locale: string) { + this.dateAdapter.setLocale(locale); + + const relativeLong = this.formats[locale].relative.long; + + relativeLong.secondsAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'seconds')); + relativeLong.minutesAgo = this.dateAdapter.relativeLongDate(moment().subtract(1, 'minutes')); + relativeLong.today = this.dateAdapter.relativeLongDate(moment().subtract(1, 'hours')); + relativeLong.yesterday = this.dateAdapter.relativeLongDate(moment().subtract(1, 'days')); + relativeLong.beforeYesterdayCurrentYear = this.dateAdapter.relativeLongDate( + moment().subtract(2, 'days') + ); + relativeLong.beforeYesterdayNotCurrentYear = this.dateAdapter.relativeLongDate( + moment().subtract(1, 'years').subtract(2, 'days') + ); + } +} diff --git a/packages/mosaic-examples/mosaic/number-formatter/module.ts b/packages/mosaic-examples/mosaic/number-formatter/module.ts new file mode 100644 index 000000000..204cc1cbe --- /dev/null +++ b/packages/mosaic-examples/mosaic/number-formatter/module.ts @@ -0,0 +1,26 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { McFormattersModule } from '@ptsecurity/mosaic/core'; +import { McFormFieldModule } from '@ptsecurity/mosaic/form-field'; +import { McInputModule } from '@ptsecurity/mosaic/input'; + +import { + NumberFormatterOverviewExample, + WithDefaultLocaleComponent, + WithENLocaleComponent +} from './number-formatter-overview/number-formatter-overview-example'; + + +@NgModule({ + imports: [ + CommonModule, + McFormattersModule, + McInputModule, + McFormFieldModule, + FormsModule + ], + declarations: [NumberFormatterOverviewExample, WithDefaultLocaleComponent, WithENLocaleComponent], + exports: [NumberFormatterOverviewExample, WithDefaultLocaleComponent, WithENLocaleComponent] +}) +export class NumberFormatterExamplesModule {} diff --git a/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/formatters-template.html b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/formatters-template.html new file mode 100644 index 000000000..25bda332d --- /dev/null +++ b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/formatters-template.html @@ -0,0 +1,55 @@ +
+ {{ mcLocaleId | json }} +
+ +
+
+
Params
+
Formatted value
+
+ +
+
-
+
{{ value | mcNumber }}
+
+
+
digitsInfo: '5.5-5'
+
{{ value | mcNumber: '5.5-5' }}
+
+
+
digitsInfo: '4.5-5'
+
{{ value | mcNumber: '4.5-5' }}
+
+
+
digitsInfo: '4.0-2'
+
{{ value | mcNumber: '4.0-2' }}
+
+
+
digitsInfo: '4.0-1'
+
{{ value | mcNumber: '4.0-1' }}
+
+
+
digitsInfo: '4.0-0'
+
{{ value | mcNumber: '4.0-0' }}
+
+
+
-
+
{{ 10000 | mcNumber }}
+
+
+
-
+
{{ 1000000 | mcNumber }}
+
+
+
-
+
{{ 10000000 | mcNumber }}
+
+
+
-
+
{{ 100000000 | mcNumber }}
+
+
+
locale {{ locale }}
+
{{ 1000 | mcNumber: '' : locale }}
+
+
diff --git a/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.css b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.css new file mode 100644 index 000000000..c137434c6 --- /dev/null +++ b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.css @@ -0,0 +1,25 @@ +default-locale, +en-locale { + display: block; +} + +.number-input { + margin-top: 32px; + margin-bottom: 32px; + + max-width: 200px; +} + +.common-container { + padding-left: 16px; + padding-right: 16px; +} + +.light-text-secondary { + color: #CCC; +} + +.row-border { + padding: 8px; + border-bottom: 1px solid #CCC; +} diff --git a/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.html b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.html new file mode 100644 index 000000000..e408780b5 --- /dev/null +++ b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.html @@ -0,0 +1,15 @@ + + + + +
+
+

with RU locale (default)

+ +
+ +
+

with EN locale

+ +
+
diff --git a/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.ts b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.ts new file mode 100644 index 000000000..a854e0a85 --- /dev/null +++ b/packages/mosaic-examples/mosaic/number-formatter/number-formatter-overview/number-formatter-overview-example.ts @@ -0,0 +1,44 @@ +import { Component, Inject, Input, Optional, ViewEncapsulation } from '@angular/core'; +import { MC_LOCALE_ID } from '@ptsecurity/mosaic/core'; + + +/** + * @title Basic progress number-formatter + */ +@Component({ + selector: 'number-formatter-overview-example', + templateUrl: 'number-formatter-overview-example.html', + styleUrls: ['number-formatter-overview-example.css'], + encapsulation: ViewEncapsulation.None +}) +export class NumberFormatterOverviewExample { + value = 1000.123; +} + +@Component({ + selector: 'default-locale', + templateUrl: 'formatters-template.html', + encapsulation: ViewEncapsulation.None +}) +export class WithDefaultLocaleComponent { + locale = 'en'; + + @Input() value: number = 0; + + constructor(@Optional() @Inject(MC_LOCALE_ID) public mcLocaleId: string) {} +} + +@Component({ + selector: 'en-locale', + templateUrl: 'formatters-template.html', + encapsulation: ViewEncapsulation.None, + providers: [{ provide: MC_LOCALE_ID, useValue: 'en' }] +}) +// tslint:disable-next-line:naming-convention +export class WithENLocaleComponent { + locale = 'ru'; + + @Input() value: number = 0; + + constructor(@Inject(MC_LOCALE_ID) public mcLocaleId: string) {} +} diff --git a/packages/mosaic-moment-adapter/adapter/moment-date-adapter.ts b/packages/mosaic-moment-adapter/adapter/moment-date-adapter.ts index f2c98cbb4..db7e7b309 100644 --- a/packages/mosaic-moment-adapter/adapter/moment-date-adapter.ts +++ b/packages/mosaic-moment-adapter/adapter/moment-date-adapter.ts @@ -463,9 +463,7 @@ export class MomentDateAdapter extends DateAdapter { const endDateVariables = this.compileVariables(endDate, variables); endDateVariables.SAME_MONTH = sameMonth; - const bothCurrentYear = - startDateVariables.CURRENT_YEAR === 'yes' && - endDateVariables.CURRENT_YEAR === 'yes'; + const bothCurrentYear = startDateVariables.CURRENT_YEAR === 'yes' && endDateVariables.CURRENT_YEAR === 'yes'; startDateVariables.CURRENT_YEAR = bothCurrentYear ? 'yes' : 'no'; endDateVariables.CURRENT_YEAR = bothCurrentYear ? 'yes' : 'no'; diff --git a/packages/mosaic/core/formatters/date-formatter.md b/packages/mosaic/core/formatters/date-formatter.md new file mode 100644 index 000000000..243138e1b --- /dev/null +++ b/packages/mosaic/core/formatters/date-formatter.md @@ -0,0 +1,8 @@ +### Absolute date + + +### Relative date + + +### Date range + \ No newline at end of file diff --git a/packages/mosaic/core/formatters/number/number-formatter.md b/packages/mosaic/core/formatters/number/number-formatter.md new file mode 100644 index 000000000..7699c5cdf --- /dev/null +++ b/packages/mosaic/core/formatters/number/number-formatter.md @@ -0,0 +1,11 @@ +Десятичная запятая + +В русском языке в качестве разделительного знака в десятичных дробях используется запятая (а не точка). + +Числа разбиваются по разрядам + +В больших числах разряды отделяются друг от друга пробелом (если есть тех. возможность, то тонким пробелом  ) — их группируют по три, считая справа: в тексте — начиная с 5 разрядов: 1234, 56 789, 987 654, 1 000 000 000. + +В таблицах — всегда: 1 234, 56 789, 987 654, 1 000 000 000. + + From cece46198785e4af15b77c56552b72772025b6c6 Mon Sep 17 00:00:00 2001 From: lkramarov Date: Fri, 6 Mar 2020 15:27:52 +0300 Subject: [PATCH 2/2] fixed linter error --- .../src/app/shared/documentation-items/documentation-items.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts index b52fc129b..02ac385a5 100644 --- a/packages/docs/src/app/shared/documentation-items/documentation-items.ts +++ b/packages/docs/src/app/shared/documentation-items/documentation-items.ts @@ -313,7 +313,7 @@ const DOCS: { [key: string]: DocCategory[] } = { examples: ['date-types'] } ] - }, + } ], [CDK]: [