| A |
Type : number
|
Default value : 65
|
| B |
Type : number
|
Default value : 66
|
| BACKSPACE |
Type : number
|
Default value : 8
|
| C |
Type : number
|
Default value : 67
|
| COMMA |
Type : number
|
Default value : 188
|
| D |
Type : number
|
Default value : 68
|
| DELETE |
Type : number
|
Default value : 46
|
| DOWN_ARROW |
Type : number
|
Default value : 40
|
| E |
Type : number
|
Default value : 69
|
| EIGHT |
Type : number
|
Default value : 56
|
| END |
Type : number
|
Default value : 35
|
| ENTER |
Type : number
|
Default value : 13
|
| ESCAPE |
Type : number
|
Default value : 27
|
| F |
Type : number
|
Default value : 70
|
| FIVE |
Type : number
|
Default value : 53
|
| FOUR |
Type : number
|
Default value : 52
|
| G |
Type : number
|
Default value : 71
|
| H |
Type : number
|
Default value : 72
|
| HOME |
Type : number
|
Default value : 36
|
| I |
Type : number
|
Default value : 73
|
| J |
Type : number
|
Default value : 74
|
| K |
Type : number
|
Default value : 75
|
| KEYS |
Type : Record<string, KeyCode>
|
Default value : {
BACKSPACE: {
code: 'Backspace',
keyCode: 8,
},
TAB: {
code: 'Tab',
keyCode: 9,
},
ENTER: {
code: 'Enter',
keyCode: 13,
},
ESCAPE: {
code: 'Escape',
keyCode: 27,
},
SPACE: {
code: 'Space',
keyCode: 32,
},
PAGE_UP: {
code: 'PageUp',
keyCode: 33,
},
PAGE_DOWN: {
code: 'PageDown',
keyCode: 34,
},
END: {
code: 'End',
keyCode: 35,
},
HOME: {
code: 'Home',
keyCode: 36,
},
LEFT_ARROW: {
code: 'ArrowLeft',
keyCode: 37,
},
UP_ARROW: {
code: 'ArrowUp',
keyCode: 38,
},
RIGHT_ARROW: {
code: 'ArrowRight',
keyCode: 39,
},
DOWN_ARROW: {
code: 'ArrowDown',
keyCode: 40,
},
DELETE: {
code: 'Delete',
keyCode: 46,
},
ZERO: {
code: 'Digit0',
keyCode: 48,
},
ONE: {
code: 'Digit1',
keyCode: 49,
},
TWO: {
code: 'Digit2',
keyCode: 50,
},
THREE: {
code: 'Digit3',
keyCode: 51,
},
FOUR: {
code: 'Digit4',
keyCode: 52,
},
FIVE: {
code: 'Digit5',
keyCode: 53,
},
SIX: {
code: 'Digit6',
keyCode: 54,
},
SEVEN: {
code: 'Digit7',
keyCode: 55,
},
EIGHT: {
code: 'Digit8',
keyCode: 56,
},
NINE: {
code: 'Digit9',
keyCode: 57,
},
A: {
code: 'KeyA',
keyCode: 65,
},
B: {
code: 'KeyB',
keyCode: 66,
},
C: {
code: 'KeyC',
keyCode: 67,
},
D: {
code: 'KeyD',
keyCode: 68,
},
E: {
code: 'KeyE',
keyCode: 69,
},
F: {
code: 'KeyF',
keyCode: 70,
},
G: {
code: 'KeyG',
keyCode: 71,
},
H: {
code: 'KeyH',
keyCode: 72,
},
I: {
code: 'KeyI',
keyCode: 73,
},
J: {
code: 'KeyJ',
keyCode: 74,
},
K: {
code: 'KeyK',
keyCode: 75,
},
L: {
code: 'KeyL',
keyCode: 76,
},
M: {
code: 'KeyM',
keyCode: 77,
},
N: {
code: 'KeyN',
keyCode: 78,
},
O: {
code: 'KeyO',
keyCode: 79,
},
P: {
code: 'KeyP',
keyCode: 80,
},
Q: {
code: 'KeyQ',
keyCode: 81,
},
R: {
code: 'KeyR',
keyCode: 82,
},
S: {
code: 'KeyS',
keyCode: 83,
},
T: {
code: 'KeyT',
keyCode: 84,
},
U: {
code: 'KeyU',
keyCode: 85,
},
V: {
code: 'KeyV',
keyCode: 86,
},
W: {
code: 'KeyW',
keyCode: 87,
},
X: {
code: 'KeyX',
keyCode: 88,
},
Y: {
code: 'KeyY',
keyCode: 89,
},
Z: {
code: 'KeyZ',
keyCode: 90,
},
COMMA: {
code: 'Comma',
keyCode: 188,
},
}
|
| L |
Type : number
|
Default value : 76
|
| LEFT_ARROW |
Type : number
|
Default value : 37
|
| M |
Type : number
|
Default value : 77
|
| N |
Type : number
|
Default value : 78
|
| NINE |
Type : number
|
Default value : 57
|
| O |
Type : number
|
Default value : 79
|
| ONE |
Type : number
|
Default value : 49
|
| P |
Type : number
|
Default value : 80
|
| PAGE_DOWN |
Type : number
|
Default value : 34
|
| PAGE_UP |
Type : number
|
Default value : 33
|
| Q |
Type : number
|
Default value : 81
|
| R |
Type : number
|
Default value : 82
|
| RIGHT_ARROW |
Type : number
|
Default value : 39
|
| S |
Type : number
|
Default value : 83
|
| SEVEN |
Type : number
|
Default value : 55
|
| SIX |
Type : number
|
Default value : 54
|
| SPACE |
Type : number
|
Default value : 32
|
| T |
Type : number
|
Default value : 84
|
| TAB |
Type : number
|
Default value : 9
|
| THREE |
Type : number
|
Default value : 51
|
| TWO |
Type : number
|
Default value : 50
|
| U |
Type : number
|
Default value : 85
|
| UP_ARROW |
Type : number
|
Default value : 38
|
| V |
Type : number
|
Default value : 86
|
| W |
Type : number
|
Default value : 87
|
| X |
Type : number
|
Default value : 88
|
| Y |
Type : number
|
Default value : 89
|
| Z |
Type : number
|
Default value : 90
|
| ZERO |
Type : number
|
Default value : 48
|
| DL_STYLES |
Default value : `
dd {font-weight: bold;}
dd:first-of-type {margin-bottom: 2rem;}
dt:after {content: ':';}
`
|
| MODULE_IMPORTS |
Type : []
|
Default value : [TsPipesModule]
|
| ALL_MIME_TYPES |
Type : []
|
Default value : [
'image/png',
'image/jpg',
'image/jpeg',
'text/csv',
'video/mp4',
'video/x-flv',
'video/webm',
'video/quicktime',
'video/mpeg',
]
|
| DIMENSIONS |
Type : []
|
Default value : [
{
height: {
min: 50,
max: 100,
},
width: {
min: 50,
max: 100,
},
},
{
height: {
min: 72,
max: 72,
},
width: {
min: 72,
max: 72,
},
},
]
|
| hideUploadButton |
Default value : () => ({
component: TsFileUploadComponent,
props: {
formControl: new FormControl(),
hideButton: boolean('Hide button', true),
},
})
|
| multiple |
Default value : () => ({
component: FileUploadWrapper,
})
|
| progressAndSeededFile |
Default value : () => ({
component: TsFileUploadComponent,
props: {
formControl: new FormControl(),
seedFile: SEED_FILE,
progress: number('Upload progress', 23),
},
})
|
| allowedMaskShortcuts |
Type : TsMaskShortcutOptions[]
|
Default value : [
'currency',
'date',
'number',
'percentage',
'phone',
'postal',
'default',
]
|
|
Create an array used to verify the passed in shortcut is valid. Used by TsInputComponent |
| AUTOCOMPLETE_DEFAULT |
Type : TsInputAutocompleteTypes
|
Default value : 'on'
|
| DEFAULT_DATE_LOCALE |
Type : string
|
Default value : 'en-US'
|
| DEFAULT_TEXTAREA_ROWS |
Type : number
|
Default value : 4
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| NUMBER_ONLY_REGEX |
Default value : /[^0-9]/g
|
| NUMBER_WITH_DECIMAL_REGEX |
Default value : /[^0-9.]/g
|
| allowedOverlayPositionTypes |
Type : TsConfirmationOverlayPositionTypes[]
|
Default value : [
'above',
'below',
'before',
'after',
]
|
|
Define the allowed tooltips Used by TsConfirmationOverlayComponent position |
| allowedTooltipTypes |
Type : TsTooltipPositionTypes[]
|
Default value : [
'above',
'below',
'before',
'after',
]
|
|
Define the allowed tooltips Used by TsTooltipComponent position |
| allowedTruncationTypes |
Type : TsTruncatePositionType[]
|
Default value : [
'start',
'middle',
'end',
]
|
|
Define the allowed truncation position types Used by TsTruncateAtPipe position |
| chord |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'chord',
},
})
|
| map |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'map',
},
})
|
| pie |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'pie',
},
})
|
| radar |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'radar',
},
})
|
| sankey |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'sankey',
},
})
|
| tree |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'tree',
},
})
|
| XY |
Default value : () => ({
component: ChartWrapper,
props: {
visualization: 'xy',
},
})
|
| aspectRatio |
Default value : () => ({
template: `<ts-card [aspectRatio]="aspectRatio">My card content</ts-card>`,
props: {
aspectRatio: select('Aspect ratio', tsCardAspectRatioTypes, '16:9'),
},
})
|
| basic |
Default value : () => ({
template: `<ts-card>My card content</ts-card>`,
})
|
| centeredContent |
Default value : () => ({
template: `<ts-card [centeredContent]="centeredContent">My card content</ts-card>`,
props: { centeredContent: boolean('Centered content', false) },
})
|
| disabled |
Default value : () => ({
template: `<ts-card [isDisabled]="disabled">My card content</ts-card>`,
props: { disabled: boolean('Disabled', true) },
})
|
| flat |
Default value : () => ({
template: `<ts-card [flat]="flat">My card content</ts-card>`,
props: { flat: boolean('Flat', true) },
})
|
| AUTOCOMPLETE_OPTION_HEIGHT |
Type : number
|
Default value : 48
|
|
The following style constants are necessary to save here in order to properly calculate the scrollTop of the panel. Because we are not actually focusing the active item, scroll must be handled manually. |
| AUTOCOMPLETE_PANEL_HEIGHT |
Type : number
|
Default value : 256
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| TS_AUTOCOMPLETE_SCROLL_STRATEGY |
Default value : new InjectionToken<() => ScrollStrategy>('mat-autocomplete-scroll-strategy')
|
| TS_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY |
Default value : (overlay: Overlay): () => ScrollStrategy => () => overlay.scrollStrategies.reposition()
|
|
Define a scroll strategy factory |
| TS_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER |
Type : object
|
Default value : {
provide: TS_AUTOCOMPLETE_SCROLL_STRATEGY,
deps: [Overlay],
useFactory: TS_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
}
|
| autoSubmit |
Default value : () => ({
component: TsSearchComponent,
props: {
autoSubmit: true,
submitted: action('Submitted'),
},
})
|
| focusOnLoad |
Default value : () => ({
component: TsSearchComponent,
props: {
isFocused: true,
},
})
|
| initialValue |
Default value : () => ({
component: TsSearchComponent,
props: {
initialValue: 'My initial value',
},
})
|
| isSubmitting |
Default value : () => ({
component: TsSearchComponent,
props: {
initialValue: 'My search query',
isSubmitting: boolean('Submitting', true),
},
})
|
| localAtob |
Default value : window.atob || atobPolyfill
|
| base |
Type : number
|
Default value : 16
|
|
NOTE: The base value and the mathematics behind these spacings must exactly reflect the spacings defined in lib/src/scss/helpers/_spacing.scss |
| basic |
Default value : () => ({
template: `
<div>
Input will be focused by default:
<br>
<input type="text" tsAutofocus />
</div>
`,
})
|
| COHORTS |
Type : TsDateCohort[]
|
Default value : [
{
display: 'Last 90 days',
range: {
start: startOfDay(subDays(DATES.start, 90)),
end: DATES.start,
},
},
{
display: 'Last full month',
range: {
start: startOfDay(subMonths(startOfMonth(DATES.end), 1)),
end: endOfDay(subDays(startOfMonth(DATES.end), 1)),
},
},
]
|
| COHORTS_ACTIVE |
Type : TsDateCohort[]
|
Default value : [
{
display: 'Last 90 days',
range: {
start: startOfDay(subDays(DATES.start, 90)),
end: DATES.start,
},
},
{
display: 'Last full month',
range: {
start: startOfDay(subMonths(startOfMonth(DATES.end), 1)),
end: endOfDay(subDays(startOfMonth(DATES.end), 1)),
},
active: true,
},
]
|
| DATES |
Type : object
|
Default value : {
start: new Date(2020, 2, 18),
startMin: new Date(2020, 2, 6),
startMax: new Date(2020, 2, 24),
end: new Date(2020, 2, 23),
endMin: new Date(2020, 2, 13),
endMax: new Date(2020, 2, 28),
}
|
| FORM_GROUP |
Default value : new FormGroup({
startDate: new FormControl(null, Validators.required),
endDate: new FormControl(null, Validators.required),
})
|
| FORM_GROUP_SEEDED |
Default value : new FormGroup({
startDate: new FormControl(DATES.start, Validators.required),
endDate: new FormControl(DATES.end, Validators.required),
})
|
| basic |
Default value : () => ({
template: `<ts-copy>{{ content }}</ts-copy>`,
props: {
content: text('Text to copy', URL_STANDARD),
},
})
|
| URL_LONG |
Type : string
|
Default value : 'https://github.com/foo/bar/baz/bing/bang/boom/foo/bar/baz/bing/bang/boom/foo/bar/baz/bing/bang/boom/foo/bar/baz/bing/bang/boom/foo/bar/baz/bing/bang/boom/foo/bar/baz/bing/bang/boom'
|
| URL_STANDARD |
Type : string
|
Default value : 'https://github.com/foo/bar/baz/bing/bang/boom/'
|
| basic |
Default value : () => ({
component: TsCSVEntryComponent,
props: {
blobGenerated: action('Generated file blob'),
},
})
|
| customRowAndColumnCount |
Default value : () => ({
component: TsCSVEntryComponent,
props: {
columnCount: 4,
rowCount: 6,
},
})
|
| fullWidth |
Default value : () => ({
component: TsCSVEntryComponent,
props: {
columnCount: 1,
fullWidth: true,
},
})
|
| staticHeaders |
Default value : () => ({
component: TsCSVEntryComponent,
props: {
columnHeaders: ['Header One', 'Header Two'],
},
})
|
| DATES |
Type : object
|
Default value : {
start: new Date(2020, 2, 18),
startMin: new Date(2020, 2, 6),
startMax: new Date(2020, 2, 24),
end: new Date(2020, 2, 23),
endMin: new Date(2020, 2, 13),
endMax: new Date(2020, 2, 28),
}
|
| FORM_GROUP |
Default value : new FormGroup({
startDate: new FormControl(null, Validators.required),
endDate: new FormControl(null, Validators.required),
})
|
| FORM_GROUP_SEEDED |
Default value : new FormGroup({
startDate: new FormControl(DATES.start, Validators.required),
endDate: new FormControl(DATES.end, Validators.required),
})
|
| locale |
Default value : () => ({
component: TsDateRangeComponent,
props: {
dateFormGroup: FORM_GROUP,
dateLocale: text('Date locale', 'zh-cn'),
},
})
|
| startingView |
Default value : () => ({
component: TsDateRangeComponent,
props: {
dateFormGroup: FORM_GROUP,
startingView: select('Starting view', ['month', 'year'], 'year'),
},
})
|
| stepperOrWizard |
Default value : () => ({
component: AccordionWrapper,
})
|
| DEFAULT_DATE |
Default value : new Date(2020, 2, 12)
|
| MAX_DATE |
Default value : add(DEFAULT_DATE, { days: 7 })
|
| MIN_DATE |
Default value : sub(DEFAULT_DATE, { days: 7 })
|
| basic |
Default value : () => ({
template: `<ts-link>{{ content }}</ts-link>`,
props: {
content: text('Content', 'My link!'),
},
})
|
| fragment |
Default value : () => ({
template: `<ts-link fragment="myLocalId">{{ content }}</ts-link>`,
props: {
content: text('Content', 'My link!'),
},
})
|
| basic |
Default value : () => ({
component: LoadingOverlayWrapper,
props: {
isLoading: boolean('Loading', true),
},
})
|
| basic |
Default value : () => ({
component: TsLogoComponent,
template: `<ts-logo></ts-logo>`,
})
|
| fullAccountHubLogo |
Default value : () => ({
component: TsLogoComponent,
props: {
type: 'full-account-hub',
},
})
|
| fullSolidLogo |
Default value : () => ({
component: TsLogoComponent,
props: {
type: 'full-solid',
},
})
|
| fullSolidLogoBlack |
Default value : () => ({
component: TsLogoComponent,
props: {
type: 'full-solid',
logoColor: 'black',
},
})
|
| NAV_ITEMS_MOCK |
Type : TsNavigationItem[]
|
Default value : [
{
name: '1 Components',
destination: '/components',
alwaysHidden: false,
},
{
name: '2 Nav',
destination: '/components/navigation',
alwaysHidden: false,
},
{
name: '3 Buttons',
destination: ['/components/button'],
alwaysHidden: false,
},
{
name: '4 Action',
action: { type: 'Do:thing' },
alwaysHidden: false,
},
{
name: '5 Menus',
destination: ['/components/menu'],
alwaysHidden: false,
},
{
name: '7 External',
destination: 'https://google.com',
alwaysHidden: true,
},
{
name: '8 Hidden',
action: { type: 'Do:another:thing' },
alwaysHidden: true,
},
]
|
| dynamicTabs |
Default value : () => ({
component: TabsDynamicWrapper,
})
|
| basic |
Default value : () => ({
component: TableWrapper,
props: {
columnsSource: COLUMNS_SOURCE.slice(),
firstColumnNoWrap: true,
columnsChange: action('Columns changed'),
},
})
|
| COLUMNS_SOURCE |
Type : CustomColumn[]
|
Default value : [
{
display: 'Title',
name: 'title',
width: 300,
control: new FormControl(true),
},
{
display: 'Comments',
name: 'comments',
width: 140,
control: new FormControl(false),
},
{
display: 'Number',
name: 'number',
width: 160,
control: new FormControl(true),
},
{
display: 'Updated',
name: 'updated',
width: 160,
control: new FormControl(true),
},
{
display: 'State',
name: 'state',
width: 140,
control: new FormControl(false),
},
{
display: 'Labels',
name: 'labels',
width: 260,
control: new FormControl(true),
},
{
display: 'Assignee',
name: 'assignee',
width: 200,
control: new FormControl(false),
},
{
display: 'ID',
name: 'id',
width: 100,
control: new FormControl(true),
},
{
display: 'Created',
name: 'created',
width: 100,
control: new FormControl(false),
},
{
display: 'View',
name: 'html_url',
width: 100,
control: new FormControl(true),
},
]
|
| expandableRows |
Default value : () => ({
component: TableWrapper,
props: {
columnsSource: COLUMNS_SOURCE.slice(),
isExpandable: true,
},
})
|
| basicWithSubLabel |
Default value : () => ({
component: RadioWrapper,
props: {
isDisabled: boolean('isDisabled', false),
selectionChange: action('DEMO: Radio change: '),
},
})
|
| DEMO_ITEMS |
Type : TsRadioOption[]
|
Default value : [
{
foo: 'foo_value',
bar: 'Foo Display',
bing: 'Some helper text for my item',
},
{
foo: 'bar_value',
bar: 'Bar Display',
bing: 'Some helper text for my item',
disabled: false,
},
{
foo: 'baz_value',
bar: 'Baz Display',
bing: 'Some helper text for my item',
},
]
|
| BYTES_PER_KB |
Type : number
|
Default value : 1024
|
|
The number of bytes per kilobyte (for calculations) |
| typesWithoutDimensionValidation |
Type : []
|
Default value : ['text/csv', 'video/mp4']
|
| cellNextUniqueId |
Type : number
|
Default value : 0
|
| headerNextUniqueId |
Type : number
|
Default value : 0
|
| TS_TABLE_MIN_COLUMN_WIDTH |
Type : number
|
Default value : 70
|
|
The minimum width for columns |
| chars |
Type : string
|
Default value : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
|
The code was extracted from: https://github.com/davidchambers/Base64.js |
| getDefaultToken |
Default value : () => createSelector(
getJwtTokenRoot(),
jwtTokenState => (jwtTokenState ? jwtTokenState.jwtTokens.defaultToken : undefined),
)
|
| getJwtTokenRoot |
Default value : <CM>() => createFeatureSelector<State<CM> | undefined>(JWT_TOKEN_MANAGEMENT_STATE_TOKEN)
|
| getTokens |
Default value : <CM>() => createSelector(
getJwtTokenRoot<CM>(),
(jwtTokenState): Tokens<CM> => (jwtTokenState ? jwtTokenState.jwtTokens.tokens : {}),
)
|
|
Return all current tokens |
| CLEANUP_DELAY |
Type : number
|
Default value : 100
|
| DEFAULT_MINUTES_BEFORE_EXPIRATION_TO_NOTIFY |
Type : number
|
Default value : 5
|
| DEFAULT_SECONDS_BEFORE_EXPIRATION_TO_NOTIFY |
Default value : DEFAULT_MINUTES_BEFORE_EXPIRATION_TO_NOTIFY * SECONDS_IN_MINUTE
|
| MS_IN_SECONDS |
Type : number
|
Default value : 1000
|
| SECONDS_BEFORE_EXPIRATION_TO_NOTIFY |
Default value : new InjectionToken<number>('wait time')
|
| SECONDS_IN_MINUTE |
Type : number
|
Default value : 60
|
| TOKENS_EXPIRED_DELAY |
Type : number
|
Default value : 10
|
| coerceArray |
Default value : <T>(value: T | T[]): T[] => (Array.isArray(value) ? value : [value])
|
|
Wraps the provided value in an array, unless the provided value is an array. |
| coerceBooleanProperty |
Default value : (value: any): boolean => value != null && `${value}` !== 'false'
|
|
Coerces a data-bound value (typically a string) to a boolean. |
| COLUMN_DEBOUNCE_DELAY |
Type : number
|
Default value : 100
|
|
The default debounce delay for column sizing update calls |
| nextUniqueId |
Type : number
|
Default value : 0
|
| VIEWPORT_DEBOUNCE |
Type : number
|
Default value : 500
|
| containsLowercaseRegex |
Default value : /(.*[a-z].*)/
|
|
Define a regex to validate a string contains at least one lowercase letter |
| createContainsLowercaseRegex |
Default value : (minimum: number): RegExp => new RegExp(`(.*[a-z].*){${minimum},}`)
|
|
Create a regex that requires a minimum amount of lowercase characters |
| containsNumbersRegex |
Default value : /(.*([0-9]+\.?[0-9]*).*)/
|
|
Define a regex to validate a string contains at least one number |
| createContainsNumbersRegex |
Default value : (minimum: number): RegExp => new RegExp(`(.*([0-9]+\.?[0-9]*).*){${minimum},}`)
|
|
Create a regex that requires a minimum amount of numbers |
| createContainsSpecialCharacterRegex |
Default value : (minimum: number): RegExp => new RegExp(`.*(?:[!@#$%^&*_=+()-].*){${minimum},}`)
|
|
Create a regex that requires a minimum amount of numbers |
| containsUppercaseRegex |
Default value : /(.*[A-Z].*)/
|
|
Define a regex to validate a string contains at least one uppercase letter |
| creditCardMessage |
Default value : `Invalid credit card number.`
|
|
Define the error message for an invalid credit card |
| emailMessage |
Default value : `Invalid email address.`
|
|
Define the error message for an invalid email |
| passwordMessage |
Default value : `Password must be between 6 and 100 characters, and contain a number.`
|
|
Define the error message for an invalid password |
| customDate |
Default value : new Date()
|
| customDateOld |
Default value : sub(customDate, { days: 3 })
|
| datePipe |
Default value : () => ({
component: PipesDateWrapper,
props: {
value: myDateKnob('Value', customDate),
},
})
|
| DL_STYLES |
Default value : `
dd {font-weight: bold;}
dd:first-of-type {margin-bottom: 2rem;}
dt:after {content: ':';}
`
|
| timeAgo |
Default value : () => ({
component: PipesTimeAgoWrapper,
props: {
value: myDateKnob('Value', customDateOld),
dateNow: customDate,
},
})
|
| dateRegex |
Default value : /^(0?[1-9]|1[012])[- \/.](0?[1-9]|[12][0-9]|3[01])[- \/.](19|20)?\d\d$/
|
|
Define a regex to verify a date Matches |
| DEFAULT_BACK_OFF_TIME |
Type : number
|
Default value : 2
|
| DEFAULT_BASE_WAIT_TIME |
Type : number
|
Default value : 100
|
| DEFAULT_JITTER_FACTOR |
Type : number
|
Default value : .3
|
| DEFAULT_COLLAPSE_DELAY_MS |
Type : number
|
Default value : 4000
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| tsButtonActionTypes |
Type : []
|
Default value : [
'Button',
'Submit',
'Menu',
'Reset',
]
|
| tsButtonFunctionTypes |
Type : []
|
Default value : [
'button',
'search',
'submit',
]
|
| tsButtonThemes |
Type : ReadonlyArray<TsButtonThemeTypes>
|
Default value : [
'default',
'secondary',
'warning',
]
|
|
The list of supported theme names |
| DEFAULT_COLUMN_COUNT |
Type : number
|
Default value : 2
|
| DEFAULT_MAX_ROWS |
Type : number
|
Default value : 2000
|
| DEFAULT_ROW_COUNT |
Type : number
|
Default value : 4
|
| DEFAULT_VALIDATION_MESSAGES_MAX |
Type : number
|
Default value : 6
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| DEFAULT_COMPARE_WITH |
Type : TsSelectOptionCompareWith
|
Default value : (o1: unknown, o2: unknown) => o1 === o2
|
|
The default compare with function used when the consumer does not define one |
| DEFAULT_DELIMITER |
Type : string
|
Default value : ','
|
| DEFAULT_VIEWPORT_MARGIN |
Type : number
|
Default value : 100
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| SELECT_ITEM_HEIGHT |
Type : number
|
Default value : 3
|
| SELECT_ITEM_HEIGHT_EM |
Default value : SELECT_ITEM_HEIGHT
|
| SELECT_MULTIPLE_PANEL_PADDING_X |
Type : number
|
Default value : 0
|
|
Distance between the panel edge and the option text in multi-selection mode. Calculated as: (SELECT_PANEL_PADDING_X * 1.5) + 20 = 44 The padding is multiplied by 1.5 because the checkbox's margin is half the padding. The checkbox width is 16px. |
| SELECT_PANEL_INDENT_PADDING_X |
Default value : SELECT_PANEL_PADDING_X * 2
|
| SELECT_PANEL_MAX_HEIGHT |
Type : number
|
Default value : 256
|
|
The following style constants are necessary to save here in order to properly calculate the alignment of the selected option over the trigger element. |
| SELECT_PANEL_PADDING_X |
Type : number
|
Default value : 16
|
| SELECT_PANEL_VIEWPORT_PADDING |
Type : number
|
Default value : 8
|
|
The select panel will only "fit" inside the viewport if it is positioned at this value or more away from the viewport boundary |
| TS_SELECT_PANEL_VIEWPORT_PADDING |
Type : number
|
Default value : 8
|
|
The select panel will only "fit" inside the viewport if it is positioned at this value or more away from the viewport boundary |
| DEFAULT_DEBOUNCE_DELAY |
Type : number
|
Default value : 200
|
| DEFAULT_MINIMUM_CHARACTER_COUNT |
Type : number
|
Default value : 2
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| DEFAULT_DEBOUNCE_DELAY |
Type : number
|
Default value : 200
|
| DEFAULT_MINIMUM_CHARACTER_COUNT |
Type : number
|
Default value : 2
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| DEFAULT_ESCALATION_WAIT_TIME |
Type : number
|
Default value : 30000
|
| ESCALATION_WAIT_TIME |
Default value : new InjectionToken<number>('wait time')
|
| FORBIDDEN_ERROR |
Type : number
|
Default value : 403
|
| SCHEDULER |
Default value : new InjectionToken<Scheduler>('scheduler')
|
| DEFAULT_MAX_PREFERRED_RECORDS |
Type : number
|
Default value : 100
|
|
Default max records before message is shown |
| DEFAULT_RECORDS_PER_PAGE |
Type : number
|
Default value : 10
|
|
Define the default count of records per page |
| DEFAULT_RECORDS_PER_PAGE_OPTIONS |
Type : []
|
Default value : [10, 20, 50]
|
|
Define the default options for the records per page select menu |
| DEFAULT_RETRY_COUNT |
Type : number
|
Default value : 2
|
| ERROR_CODE_500_MAX |
Type : number
|
Default value : 599
|
| ERROR_CODE_500_MIN |
Type : number
|
Default value : 500
|
| ERROR_CODE_TOO_MANY_REQUESTS |
Type : number
|
Default value : 429
|
| DEFAULT_RETRY_COUNT |
Type : number
|
Default value : 3
|
| DEFAULT_SCROLL_SPEED |
Type : number
|
Default value : 400
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| DEFAULT_USER_NAME_MAX_LENGTH |
Type : number
|
Default value : 20
|
| DEFAULT_WELCOME_MESSAGE_MAX_LENGTH |
Type : number
|
Default value : 20
|
| isLinkItem |
Default value : (x: TsNavigationLinkItem | TsNavigationActionItem): x is TsNavigationLinkItem => !!(x as TsNavigationLinkItem).destination
|
|
Determine if a navigation item is a TsNavigationLinkItem |
| DL_STYLES |
Default value : `
dd {font-weight: bold;}
dd:first-of-type {margin-bottom: 2rem;}
dt:after {content: ':';}
`
|
| MODULE_IMPORTS |
Type : []
|
Default value : [TsPipesModule]
|
| sentenceCase |
Default value : () => ({
moduleMetadata: { imports: [...MODULE_IMPORTS] },
component: PipesSentenceWrapper,
props: {
value: text('Value', 'THE QUICK BROWN FOX'),
},
})
|
| domain |
Default value : () => ({
component: StringWrapper,
props: {
demo: 'domain',
},
})
|
| lowercase |
Default value : () => ({
component: StringWrapper,
props: {
demo: 'lowercase',
},
})
|
| uppercase |
Default value : () => ({
component: StringWrapper,
props: {
demo: 'uppercase',
},
})
|
| url |
Default value : () => ({
component: StringWrapper,
props: {
demo: 'url',
},
})
|
| equalToControl |
Default value : () => ({
component: UniversalWrapper,
props: {
demo: 'equalToControl',
},
})
|
| inCollection |
Default value : () => ({
component: UniversalWrapper,
props: {
demo: 'inCollection',
},
})
|
| password |
Default value : () => ({
component: UniversalWrapper,
props: {
demo: 'password',
},
})
|
| EXAGGERATED_OVERSCROLL |
Type : number
|
Default value : 60
|
|
The distance in pixels that will be overshot when scrolling a tab label into view. This helps provide a small affordance to the label next to it. |
| HEADER_SCROLL_DELAY |
Type : number
|
Default value : 650
|
|
Amount of milliseconds to wait before starting to scroll the header automatically. NOTE: This is set a little conservatively in order to handle fake events dispatched on touch devices. |
| HEADER_SCROLL_INTERVAL |
Type : number
|
Default value : 100
|
|
Interval in milliseconds at which to scroll the header while the user is holding their pointer. |
| passiveEventListenerOptions |
Default value : normalizePassiveListenerOptions({ passive: true }) as EventListenerOptions
|
|
Config used to bind passive event listeners |
| EXPORTED_DECLARATIONS |
Type : []
|
Default value : [
TsChipBadgeDirective,
TsChipComponent,
TsChipCollectionComponent,
]
|
| FLOATING_LABEL_SCALE |
Type : number
|
Default value : .75
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| OUTLINE_GAP_PADDING |
Type : number
|
Default value : 5
|
| getSortDuplicateSortableIdError |
Default value : (id: string): Error => Error(`Cannot have two TsSortables with the same id (${id}).`)
|
| getSortHeaderMissingIdError |
Default value : (): Error => Error(`TsSortHeader must be provided with a unique id.`)
|
| getSortHeaderNotContainedWithinSortError |
Default value : (): Error => Error(`TsSortHeader must be placed within a parent element with the TsSort directive.`)
|
| getSortInvalidDirectionError |
Default value : (direction: string): Error => Error(`${direction} is not a valid sort direction ('asc' or 'desc').`)
|
| greaterThan |
Default value : () => ({
component: NumberWrapper,
props: {
demo: 'greaterThan',
},
})
|
| isInRange |
Default value : () => ({
component: NumberWrapper,
props: {
demo: 'isInRange',
},
})
|
| lessThan |
Default value : () => ({
component: NumberWrapper,
props: {
demo: 'lessThan',
},
})
|
| numbers |
Default value : () => ({
component: NumberWrapper,
props: {
demo: 'numbers',
},
})
|
| HOURS_IN_DAY |
Type : number
|
Default value : 24
|
| MINUTES_IN_HOUR |
Type : number
|
Default value : 60
|
| MS_IN_DAY |
Default value : MS_IN_SECONDS * SECONDS_IN_MINUTE * MINUTES_IN_HOUR * HOURS_IN_DAY
|
| MS_IN_SECONDS |
Type : number
|
Default value : 1000
|
| SECONDS_IN_MINUTE |
Type : number
|
Default value : 60
|
| INITIAL_TOKEN_NAME |
Default value : new InjectionToken('jwt-token-managment INITIAL_JWT_TOKEN_NAME')
|
| initialState |
Type : JwtTokenProviderState
|
Default value : {
initialTokenStatus: 'uninitialized',
tokens: {},
}
|
| INPUT_DEBOUNCE_DEFAULT_MS |
Type : number
|
Default value : 200
|
| INPUT_MINIMUM_LENGTH |
Type : number
|
Default value : 2
|
| isAbstractControl |
Default value : (x: Record<string, any>): x is AbstractControl => !!x && x.hasOwnProperty('valueChanges')
|
|
Determine if the item is an AbstractControl |
| isBoolean |
Default value : (value: any): value is boolean => value === true || value === false || Object.prototype.toString.call(value) === '[object Boolean]'
|
|
Determine if a value is a boolean |
| isDateValue |
Default value : (value: any): value is Date => !isNaN(Date.parse(value))
|
|
Whether the provided value is considered a date. |
| isDragEvent |
Default value : (x: any): x is DragEvent => !!x && isSet(x.dataTransfer)
|
|
Coerce the type to DragEvent |
| isHTMLInputElement |
Default value : (x: any): x is HTMLInputElement => !!x && isSet(x.files)
|
|
Coerce the type to HTMLInputElement |
| isKeyboardEvent |
Default value : (x: any): x is KeyboardEvent => !!x && isSet(x.code)
|
|
Coerce the type to KeyboardEvent |
| isMouseEvent |
Default value : (x: any): x is MouseEvent => !!x && isSet(x.relatedTarget)
|
|
Coerce the type to MouseEvent |
| isNull |
Default value : (x: any): x is null => x === null
|
|
Determine if an item is null |
| isNumber |
Default value : (value: any): value is number => !isNaN(parseFloat(value)) && !isNaN(Number(value))
|
|
Determine if a value is a number |
| isObject |
Default value : (x: any): x is object => Object.prototype.toString.call(x) === '[object Object]'
|
|
Determine if an item is an object |
| isSet |
Default value : <T>(x: any): x is T => !isUndefined(x)
|
|
Determine if the item has a value |
| isString |
Default value : (x: any): x is string => !!(typeof x === 'string' || x instanceof String)
|
|
Determine if a value is a string |
| isUndefined |
Default value : (input: any): input is undefined => input === undefined
|
|
Helper function to determine if input is undefined. |
| isUnset |
Default value : (x: any): boolean => isNull(x) || isUndefined(x)
|
|
Helper function to determine if input is unset. |
| JWT_TOKEN_MANAGEMENT_STATE_TOKEN |
Type : string
|
Default value : 'ngx-tools-jwtTokenManagement'
|
| jwtModuleEmptyState |
Type : State
|
Default value : {
jwtTokens: {
initialTokenStatus: 'empty',
tokens: {},
},
}
|
| jwtEmptyStateReset |
Type : object
|
Default value : { [JWT_TOKEN_MANAGEMENT_STATE_TOKEN]: jwtModuleEmptyState }
|
| MAP_DATA |
Type : Record[]
|
Default value : [{
latitude: 48.856614,
longitude: 2.352222,
title: 'Paris',
}, {
latitude: 40.712775,
longitude: -74.005973,
title: 'New York',
}, {
latitude: 49.282729,
longitude: -123.120738,
title: 'Vancouver',
}]
|
| visits |
Type : number
|
Default value : 10
|
| XY_DATA |
Type : Record[]
|
Default value : []
|
| MARGIN_SIZE_CONVERSION |
Type : number
|
Default value : 16
|
|
This is used to convert margin measurement from rem to px. |
| MAX_DATE |
Default value : new Date(2020, 2, 24)
|
| maxDate |
Default value : () => ({
component: DateWrapper,
props: {
demo: 'maxDate',
maxDate: date('Max date', new Date(2020, 2, 24)),
},
})
|
| MIN_DATE |
Default value : new Date(2020, 2, 6)
|
| minDate |
Default value : () => ({
component: DateWrapper,
props: {
demo: 'minDate',
minDate: date('Min date', new Date(2020, 2, 6)),
},
})
|
| START_DATE |
Default value : new Date(2020, 2, 14)
|
| MAXIMUM_KILOBYTES_PER_FILE |
Default value : 10 * 1024
|
|
The maximum file size in bytes NOTE: Currently nginx has a hard limit of 10mb |
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| tsCardAspectRatioTypes |
Type : TsAspectRatioTypes[]
|
Default value : [
'16:9',
'4:3',
'3:2',
'5:4',
'1:1',
]
|
| tsCardBorderOptionsList |
Type : TsCardBorderOptions[]
|
Default value : [
'none',
'left',
'right',
'top',
'bottom',
]
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each panel trigger ID |
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| TS_OPTGROUP_PARENT_COMPONENT |
Type : miscellaneou
|
Default value : new InjectionToken<TsOptgroupParentComponent>('TS_OPTGROUP_PARENT_COMPONENT')
|
|
Injection token used to provide the parent optgroup to options. Used by TsOptgroupComponent |
| TS_OPTION_PARENT_COMPONENT |
Type : miscellaneou
|
Default value : new InjectionToken<TsOptionParentComponent>('TS_OPTION_PARENT_COMPONENT')
|
|
Injection token used to provide the parent component to options. Used by TsOptionComponent Since TsSelectionListComponent imports TsOptionComponent, importing TsSelectionListComponent here will cause a circular dependency. Injecting via an InjectionToken helps us circumvent that limitation. |
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
|
Unique ID for each instance |
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| SELECTION_LIST_PANEL_MAX_HEIGHT |
Type : number
|
Default value : 256
|
| TS_SELECTION_LIST_SCROLL_STRATEGY |
Default value : new InjectionToken<() => ScrollStrategy>('ts-selection-list-scroll-strategy')
|
| TS_SELECTION_LIST_SCROLL_STRATEGY_FACTORY |
Default value : (overlay: Overlay): () => ScrollStrategy => () => overlay.scrollStrategies.reposition()
|
| TS_SELECTION_LIST_SCROLL_STRATEGY_FACTORY_PROVIDER |
Type : object
|
Default value : {
provide: TS_SELECTION_LIST_SCROLL_STRATEGY,
deps: [Overlay],
useFactory: TS_SELECTION_LIST_SCROLL_STRATEGY_FACTORY,
}
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| tsTabAlignmentOptions |
Type : []
|
Default value : [
'start',
'center',
'end',
'stretch',
]
|
| tsTabHeaderPositions |
Type : []
|
Default value : [
'above',
'below',
]
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| nextUniqueId |
Type : number
|
Default value : 0
|
| noop |
Default value : (): undefined => void 0
|
|
Placeholder function. |
| onlyLettersRegex |
Default value : /^[a-zA-Z]+$/
|
|
Define a regex to validate a string contains only letters |
| onlyNumbersRegex |
Default value : /^-?(\d+\.?\d*)$|(\d*\.?\d+)$/
|
|
Define a regex to validate a string contains only numbers |
| originalDocument |
Default value : (): Document => document
|
|
Return the native document object |
| postProcess |
Default value : (x: string, pascalCase: boolean): string => (pascalCase ? x.charAt(0).toUpperCase() + x.slice(1) : x)
|
|
Post process a conversion into PascalCase if necessary |
| queryFor |
Default value : <T>(fixture: ComponentFixture<T>, selector: string): DebugElement => fixture.debugElement.query(By.css(selector))
|
|
Helper to query a fixture for a selector |
| realWindow |
Default value : (): Window => window
|
|
Return the native window object |
| reducers |
Type : ActionReducerMap<State, any>
|
Default value : { jwtTokens: jwtTokenProviderReducer }
|
| regenerateOnRetry |
Default value : <T>(obs: (() => Observable<T>)): Observable<T> => of(true).pipe(
switchMap(() => obs()),
)
|
|
Regenerate on retry |
| SORT_ANIMATION_TRANSITION |
Default value : `${AnimationDurations.ENTERING } ${ AnimationCurves.STANDARD_CURVE}`
|
| STATES |
Type : State[]
|
Default value : [
{
name: 'Alabama',
abbreviation: 'AL',
},
{
name: 'Alaska',
abbreviation: 'AK',
},
{
name: 'American Samoa',
abbreviation: 'AS',
},
{
name: 'Arizona',
abbreviation: 'AZ',
},
{
name: 'Arkansas',
abbreviation: 'AR',
},
{
name: 'California',
abbreviation: 'CA',
},
{
name: 'Colorado',
abbreviation: 'CO',
},
{
name: 'Connecticut',
abbreviation: 'CT',
},
{
name: 'Delaware',
abbreviation: 'DE',
},
{
name: 'District Of Columbia',
abbreviation: 'DC',
},
{
name: 'Federated States Of Micronesia',
abbreviation: 'FM',
},
{
name: 'Florida',
abbreviation: 'FL',
},
{
name: 'Georgia',
abbreviation: 'GA',
},
{
name: 'Guam Gu',
abbreviation: 'GU',
},
{
name: 'Hawaii',
abbreviation: 'HI',
},
{
name: 'Idaho',
abbreviation: 'ID',
},
{
name: 'Illinois',
abbreviation: 'IL',
},
{
name: 'Indiana',
abbreviation: 'IN',
},
{
name: 'Iowa',
abbreviation: 'IA',
},
{
name: 'Kansas',
abbreviation: 'KS',
},
{
name: 'Kentucky',
abbreviation: 'KY',
},
{
name: 'Louisiana',
abbreviation: 'LA',
},
{
name: 'Maine',
abbreviation: 'ME',
},
{
name: 'Marshall Islands',
abbreviation: 'MH',
},
{
name: 'Maryland',
abbreviation: 'MD',
},
{
name: 'Massachusetts',
abbreviation: 'MA',
},
{
name: 'Michigan',
abbreviation: 'MI',
},
{
name: 'Minnesota',
abbreviation: 'MN',
},
{
name: 'Mississippi',
abbreviation: 'MS',
},
{
name: 'Missouri',
abbreviation: 'MO',
},
{
name: 'Montana',
abbreviation: 'MT',
},
{
name: 'Nebraska',
abbreviation: 'NE',
},
{
name: 'Nevada',
abbreviation: 'NV',
},
{
name: 'New Hampshire',
abbreviation: 'NH',
},
{
name: 'New Jersey',
abbreviation: 'NJ',
},
{
name: 'New Mexico',
abbreviation: 'NM',
},
{
name: 'New York',
abbreviation: 'NY',
},
{
name: 'North Carolina',
abbreviation: 'NC',
},
{
name: 'North Dakota',
abbreviation: 'ND',
},
{
name: 'Northern Mariana Islands',
abbreviation: 'MP',
},
{
name: 'Ohio',
abbreviation: 'OH',
},
{
name: 'Oklahoma',
abbreviation: 'OK',
},
{
name: 'Oregon',
abbreviation: 'OR',
},
{
name: 'Palau',
abbreviation: 'PW',
},
{
name: 'Pennsylvania',
abbreviation: 'PA',
},
{
name: 'Puerto Rico',
abbreviation: 'PR',
},
{
name: 'Rhode Island',
abbreviation: 'RI',
},
{
name: 'South Carolina',
abbreviation: 'SC',
},
{
name: 'South Dakota',
abbreviation: 'SD',
},
{
name: 'Tennessee',
abbreviation: 'TN',
},
{
name: 'Texas',
abbreviation: 'TX',
},
{
name: 'Utah',
abbreviation: 'UT',
},
{
name: 'Vermont',
abbreviation: 'VT',
},
{
name: 'Virgin Islands',
abbreviation: 'VI',
},
{
name: 'Virginia',
abbreviation: 'VA',
},
{
name: 'Washington',
abbreviation: 'WA',
},
{
name: 'West Virginia',
abbreviation: 'WV',
},
{
name: 'Wisconsin',
abbreviation: 'WI',
},
{
name: 'Wyoming',
abbreviation: 'WY',
},
]
|
| TOKEN_NOT_FOUND_ERROR |
Default value : new Error('Token Not found in response')
|
| TS_ACCEPTED_MIME_TYPES |
Type : TsFileAcceptedMimeTypes[]
|
Default value : [
'text/csv',
'image/jpeg',
'image/jpg',
'image/png',
'image/gif',
'video/mp4',
'video/x-flv',
'video/webm',
'video/quicktime',
'video/mpeg',
]
|
|
Define an array of all allowed mime types for TsFileUploadComponent |
| TS_ACCORDION |
Default value : new InjectionToken<TsAccordionBase>('TS_ACCORDION')
|
|
Token used to provide a TsAccordionComponent to TsExpansionPanelComponent. Used primarily to avoid circular imports between |
| TS_AMCHARTS_TOKEN |
Default value : new InjectionToken<TsAmChartsToken>('amCharts')
|
|
Create an injection token that the consumer can override with their version of amCharts |
| TS_DATE_FORMATS |
Type : object
|
Default value : {
parse: {
dateInput: {
month: 'short',
year: 'numeric',
day: 'numeric',
},
},
display: {
dateInput: 'input',
monthYearLabel: {
year: 'numeric',
month: 'short',
},
dateA11yLabel: {
year: 'numeric',
month: 'long',
day: 'numeric',
},
monthYearA11yLabel: {
year: 'numeric',
month: 'long',
},
},
}
|
|
Define date formats to be used with the custom date adapter |
| TS_DRAWER_DEFAULT_COLLAPSE_SIZE |
Type : string
|
Default value : '3.75rem'
|
| TS_DRAWER_DEFAULT_EXPAND_SIZE |
Type : string
|
Default value : '12.5rem'
|
| TS_EXPANSION_PANEL_ANIMATION_TIMING |
Type : string
|
Default value : '225ms cubic-bezier(0.4,0.0,0.2,1)'
|
|
Time and timing curve for expansion panel animation |
| tsExpansionPanelAnimations |
Type : literal type
|
Default value : {
/**
* Animation that rotates the indicator arrow
*/
indicatorRotate: trigger('indicatorRotate', [
state('collapsed, void', style({ transform: 'rotate(0deg)' })),
state('expanded', style({ transform: 'rotate(180deg)' })),
transition('expanded <=> collapsed, void => collapsed',
animate(TS_EXPANSION_PANEL_ANIMATION_TIMING)),
]),
/**
* Animation that expands and collapses the panel trigger height
*/
expansionTriggerHeight: trigger('expansionHeight', [
state('collapsed, void', style({ height: '{{collapsedHeight}}' }), { params: { collapsedHeight: '48px' } }),
state('expanded', style({ height: '{{expandedHeight}}' }), { params: { expandedHeight: '64px' } }),
transition('expanded <=> collapsed, void => collapsed', group([
query('@indicatorRotate', animateChild(), { optional: true }),
animate(TS_EXPANSION_PANEL_ANIMATION_TIMING),
])),
]),
/**
* Animation that expands and collapses the panel content
*/
bodyExpansion: trigger('bodyExpansion', [
state('collapsed, void', style({
height: '0px',
visibility: 'hidden',
})),
state('expanded', style({
height: '*',
visibility: 'visible',
})),
transition('expanded <=> collapsed, void => collapsed',
animate(TS_EXPANSION_PANEL_ANIMATION_TIMING)),
]),
}
|
|
Animations used by the Material expansion panel. A bug in angular animation's To correctly handle animating to the next state, we animate between In the case where angular's animation state is out of sync with the expansion panel's state, the
expansion panel being Angular Bug: https://github.com/angular/angular/issues/18847 |
| TS_INPUT_VALUE_ACCESSOR |
Default value : new InjectionToken<{value: any}>('TS_INPUT_VALUE_ACCESSOR')
|
|
This token is used to inject the object whose value should be set into TsInputComponent. If none is
provided, the native |
| TS_LOGO_COLORS |
Type : TS_LOGO_COLOR[]
|
Default value : [
'white',
'black',
'gray',
]
|
|
An array of supported logo colors. |
| TS_LOGO_TYPES |
Type : TS_LOGO_TYPE[]
|
Default value : [
'full-account-hub',
'full-gradient',
'full-solid',
'mark-gradient',
'mark-solid',
]
|
|
An array of supported logo types. |
| TS_SORT_HEADER_INTL_PROVIDER |
Type : object
|
Default value : {
// If there is already an TsSortHeaderIntl available, use that. Otherwise, provide a new one.
provide: TsSortHeaderIntl,
deps: [[new Optional(), new SkipSelf(), TsSortHeaderIntl]],
useFactory: TS_SORT_HEADER_INTL_PROVIDER_FACTORY,
}
|
|
TsSortHeaderIntl provider declaration |
| TS_SORT_HEADER_INTL_PROVIDER_FACTORY |
Default value : (parentIntl: TsSortHeaderIntl) => parentIntl || new TsSortHeaderIntl()
|
|
Factory to return an instance of TsSortHeaderIntl |
| tsChartChordTypeCheck |
Default value : (chart: TsChart): chart is am4charts.ChordDiagram => chart.className === 'ChordDiagram'
|
|
Coerce the type to ChordDiagram |
| tsChartMapTypeCheck |
Default value : (chart: TsChart): chart is am4maps.MapChart => chart.className === 'MapChart'
|
|
Coerce the type to MapChart |
| tsChartPieTypeCheck |
Default value : (chart: TsChart): chart is am4charts.PieChart => chart.className === 'PieChart'
|
|
Coerce the type to PieChart |
| tsChartRadarTypeCheck |
Default value : (chart: TsChart): chart is am4charts.RadarChart => chart.className === 'RadarChart'
|
|
Coerce the type to RadarChart |
| tsChartSankeyTypeCheck |
Default value : (chart: TsChart): chart is am4charts.SankeyDiagram => chart.className === 'SankeyDiagram'
|
|
Coerce the type to SankeyDiagram |
| tsChartTreeTypeCheck |
Default value : (chart: TsChart): chart is am4charts.TreeMap => chart.className === 'TreeMap'
|
|
Coerce the type to TreeMap |
| tsChartXYTypeCheck |
Default value : (chart: TsChart): chart is am4charts.XYChart => chart.className === 'XYChart'
|
|
Coerce the type to XYChart |
| tsChartVisualizationOptions |
Type : ReadonlyArray<TsChartVisualizationOptions>
|
Default value : [
'xy',
'pie',
'map',
'radar',
'tree',
'sankey',
'chord',
]
|
| tsDrawerAnimations |
Type : literal type
|
Default value : {
// Animation that expands and collapses a drawer.
transformDrawer: trigger('transform', [
state('open, open-instant', style({
transform: 'none',
visibility: 'visible',
width: '{{ expandedSize }}',
}), { params: { expandedSize: '12.5rem' } }),
state('void', style({
'box-shadow': 'none',
'visibility': 'visible',
'width': '{{ collapsedSize }}',
}), { params: { collapsedSize: '3.75rem' } }),
state('void-shadow', style({
visibility: 'visible',
width: '{{ collapsedSize }}',
}), { params: { collapsedSize: '3.75rem' } }),
transition('void => open-instant', animate('0ms')),
transition('void <=> open, open-instant => void, void-shadow <=> open, open-instant => void-shadow',
animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
]),
}
|
|
Animations used by the TsDrawerComponent. |
| tsIconSizes |
Type : ReadonlyArray<string>
|
Default value : [
'xs',
'sm',
'lg',
'1x',
'2x',
'3x',
'4x',
'5x',
'6x',
'7x',
'8x',
'9x',
'10x',
]
|
| tsSelectAnimations |
Type : literal type
|
Default value : {
/**
* This animation transforms the select's overlay panel on and off the page.
*
* When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
* up to 100% on the Y axis, fades in its border, and translates slightly up and to the
* side to ensure the option text correctly overlaps the trigger text.
*
* When the panel is removed from the DOM, it simply fades out linearly.
*/
transformPanel: trigger('transformPanel', [
state('void', style({
transform: 'scaleY(0.8)',
minWidth: '100%',
opacity: 0,
})),
state('showing', style({
opacity: 1,
minWidth: 'calc(100% + 32px)',
transform: 'scaleY(1)',
})),
state('showing-multiple', style({
opacity: 1,
minWidth: 'calc(100% + 24px)',
transform: 'scaleY(1)',
})),
transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
transition('* => void', animate('100ms 25ms linear', style({ opacity: 0 }))),
]),
}
|
|
The defined panel animations for the TsSelectComponent |
| tsStyleThemeTypesArray |
Type : TsStyleThemeTypes[]
|
Default value : ['primary', 'accent', 'warn']
|
|
An array of the allowed TsStyleThemeTypes for checking values |
| tsTableColumnAlignmentTypesArray |
Type : TsTableColumnAlignment[]
|
Default value : [
'left',
'center',
'right',
]
|
|
An array of the allowed TsTableColumnAlignment for checking values |
| tsTabsAnimations |
Type : literal type
|
Default value : {
// This animation translates a tab along the X axis
translateTab: trigger('translateTab', [
// Note: transitions to `none` instead of 0, because some browsers might blur the content.
state('center, void, left-origin-center, right-origin-center', style({ transform: 'none' })),
// NOTE: If the tab is either on the left or right, we additionally add a `min-height` of 1px in order to ensure that the element has a
// height before its state changes. This is necessary because Chrome does seem to skip the transition in RTL mode if the element does
// not have a static height and is not rendered. See related issue: https://github.com/angular/material2/issues/9465
state(
'left',
style({
minHeight: '1px',
opacity: 0,
transform: 'translate3d(-50%, 0, 0)',
}),
),
state(
'right',
style({
opacity: 0,
minHeight: '1px',
transform: 'translate3d(50%, 0, 0)',
}),
),
transition(
'* => left, * => right, left => center, right => center',
animate('200ms cubic-bezier(0.35, 0, 0.25, 1)'),
),
transition('void => left-origin-center', [
style({ transform: 'translate3d(-100%, 0, 0)' }),
animate('200ms cubic-bezier(0.35, 0, 0.25, 1)'),
]),
transition('void => right-origin-center', [
style({ transform: 'translate3d(100%, 0, 0)' }),
animate('200ms cubic-bezier(0.35, 0, 0.25, 1)'),
]),
]),
}
|
|
Animations used by TsTabCollectionComponent |
| tsVerticalSpacingTypes |
Type : []
|
Default value : [
'small--2',
'small--1',
'small--0',
'none',
'default--0',
'large--0',
'large--1',
'large--2',
'large--3',
'large--4',
'large--5',
'large--6',
]
|
| typeCache |
Type : literal type
|
Default value : {}
|
|
Define the typeCache which will hold all action types for the entire application |
| urlOptionalProtocolRegex |
Default value : new RegExp(
'^'
// protocol identifier
+ '(?:(?:https?|ftp)://)?'
// user:pass authentication
+ '(?:\\S+(?::\\S*)?@)?'
+ '(?:'
// IP address exclusion
// private & local networks
+ '(?!(?:10|127)(?:\\.\\d{1,3}){3})'
+ '(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})'
+ '(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})'
// IP address dotted notation octets
// excludes loopback network 0.0.0.0
// excludes reserved space >= 224.0.0.0
// excludes network & broacast addresses
// (first & last IP address of each class)
+ '(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])'
+ '(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}'
+ '(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))'
+ '|'
// host name
+ '(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)'
// domain name
+ '(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*'
// TLD identifier
+ '(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))'
// TLD may end with dot
+ '\\.?'
+ ')'
// port number
+ '(?::\\d{2,5})?'
// resource path
+ '(?:[/?#]\\S*)?'
+ '$', 'i',
)
|
|
Define a regex to validate a URL Discussion: https://gist.github.com/dperini/729294 NOTE: This is identical to our standard URL regex with the exception that the protocol is optional. |
| urlRegex |
Default value : new RegExp(
'^'
// protocol identifier
+ '(?:(?:https?|ftp)://)'
// user:pass authentication
+ '(?:\\S+(?::\\S*)?@)?'
+ '(?:'
// IP address exclusion
// private & local networks
+ '(?!(?:10|127)(?:\\.\\d{1,3}){3})'
+ '(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})'
+ '(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})'
// IP address dotted notation octets
// excludes loopback network 0.0.0.0
// excludes reserved space >= 224.0.0.0
// excludes network & broacast addresses
// (first & last IP address of each class)
+ '(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])'
+ '(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}'
+ '(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))'
+ '|'
// host name
+ '(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)'
// domain name
+ '(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*'
// TLD identifier
+ '(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))'
// TLD may end with dot
+ '\\.?'
+ ')'
// port number
+ '(?::\\d{2,5})?'
// resource path
+ '(?:[/?#]\\S*)?'
+ '$', 'i',
)
|
|
Define a regex to validate a URL Discussion: https://gist.github.com/dperini/729294 |
| usaPhoneRegex |
Default value : /\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*/
|
|
Define a regex to validate US phone numbers |
| usaPostalRegex |
Default value : /^[0-9]{5}(-[0-9]{4})?$/
|
|
Define a regex to verify a US postal code Matches |