@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
310 lines (287 loc) • 10.7 kB
JavaScript
import { InjectionToken, inject, signal, effect, Optional, SkipSelf, ElementRef } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { tuiProvide, tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { WA_LOCAL_STORAGE, WA_WINDOW } from '@ng-web-apis/common';
import { fromEvent, filter, of, map, merge, switchMap, takeUntil, share } from 'rxjs';
import { TuiDayOfWeek } from '@taiga-ui/cdk/date-time';
import { tuiExtractI18n } from '@taiga-ui/i18n/utils';
import { CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
const TUI_REDUCED_MOTION = new InjectionToken(ngDevMode ? 'TUI_REDUCED_MOTION' : '', {
factory: () => inject(DOCUMENT).defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)')
.matches ?? false,
});
/**
* Speed of all Taiga UI animations. 1 equals 300ms.
*/
const TUI_ANIMATIONS_SPEED = new InjectionToken(ngDevMode ? 'TUI_ANIMATIONS_SPEED' : '', {
factory: () => (inject(TUI_REDUCED_MOTION) ? 0 : 1),
});
const TUI_ASSETS_PATH = new InjectionToken(ngDevMode ? 'TUI_ASSETS_PATH' : '', {
factory: () => 'assets/taiga-ui/icons',
});
function tuiAssetsPathProvider(useValue) {
return {
provide: TUI_ASSETS_PATH,
useValue,
};
}
const TUI_AUXILIARY = new InjectionToken(ngDevMode ? 'TUI_AUXILIARY' : '', {
factory: () => null,
});
function tuiAsAuxiliary(x) {
return tuiProvide(TUI_AUXILIARY, x);
}
// TODO: Rename `ellipsis` to `more` in the next major version
const COMMON_ICONS = {
check: '@tui.check',
close: '@tui.x',
error: '@tui.circle-alert',
more: '@tui.chevron-right',
search: '@tui.search',
ellipsis: '@tui.ellipsis',
};
const TUI_COMMON_ICONS = new InjectionToken(ngDevMode ? 'TUI_COMMON_ICONS' : '', {
factory: () => COMMON_ICONS,
});
function tuiCommonIconsProvider(icons) {
return tuiProvideOptions(TUI_COMMON_ICONS, icons, COMMON_ICONS);
}
const TUI_DARK_MODE_DEFAULT_KEY = 'tuiDark';
const TUI_DARK_MODE_KEY = new InjectionToken(ngDevMode ? 'TUI_DARK_MODE_KEY' : '', {
factory: () => TUI_DARK_MODE_DEFAULT_KEY,
});
const TUI_DARK_MODE = new InjectionToken(ngDevMode ? 'TUI_DARK_MODE' : '', {
factory: () => {
let automatic = true;
const storage = inject(WA_LOCAL_STORAGE);
const key = inject(TUI_DARK_MODE_KEY);
const saved = storage?.getItem(key);
const media = inject(WA_WINDOW).matchMedia('(prefers-color-scheme: dark)');
const result = signal(Boolean((saved && JSON.parse(saved)) ?? media.matches));
fromEvent(media, 'change')
.pipe(filter(() => !storage?.getItem(key)), takeUntilDestroyed())
.subscribe(() => {
automatic = true;
result.set(media.matches);
});
effect(() => {
const value = String(result());
if (automatic) {
automatic = false;
}
else {
storage?.setItem(key, value);
}
});
return Object.assign(result, {
reset: () => {
storage?.removeItem(key);
automatic = true;
result.set(media.matches);
},
});
},
});
const TUI_DEFAULT_DATE_FORMAT = {
mode: 'DMY',
separator: '.',
};
/**
* Formatting configuration for displayed dates
*/
const TUI_DATE_FORMAT = new InjectionToken(ngDevMode ? 'TUI_DATE_FORMAT' : '', {
factory: () => of(TUI_DEFAULT_DATE_FORMAT),
});
function tuiDateFormatProvider(options) {
return {
provide: TUI_DATE_FORMAT,
deps: [[new Optional(), new SkipSelf(), TUI_DATE_FORMAT]],
useFactory: (parent) => (parent || of(TUI_DEFAULT_DATE_FORMAT)).pipe(map((format) => ({ ...format, ...options }))),
};
}
/**
* Token for adding data-type attribute to calendar cell
*/
const TUI_DAY_TYPE_HANDLER = new InjectionToken(ngDevMode ? 'TUI_DAY_TYPE_HANDLER' : '', {
factory: () => (day) => (day.isWeekend ? 'weekend' : 'weekday'),
});
/**
* The first day of the week index
*/
const TUI_FIRST_DAY_OF_WEEK = new InjectionToken(ngDevMode ? 'TUI_FIRST_DAY_OF_WEEK' : '', {
factory: () => TuiDayOfWeek.Monday,
});
/**
* Localized months names
*/
const TUI_MONTHS = new InjectionToken(ngDevMode ? 'TUI_MONTHS' : '', {
factory: tuiExtractI18n('months'),
});
/**
* i18n 'close' word
*/
const TUI_CLOSE_WORD = new InjectionToken(ngDevMode ? 'TUI_CLOSE_WORD' : '', {
factory: tuiExtractI18n('close'),
});
/**
* i18n 'clear' word
*/
const TUI_CLEAR_WORD = new InjectionToken(ngDevMode ? 'TUI_CLEAR_WORD' : '', {
factory: tuiExtractI18n('clear'),
});
/**
* i18n 'Nothing found' message
*/
const TUI_NOTHING_FOUND_MESSAGE = new InjectionToken(ngDevMode ? 'TUI_NOTHING_FOUND_MESSAGE' : '', {
factory: tuiExtractI18n('nothingFoundMessage'),
});
/**
* i18n of error message
*/
const TUI_DEFAULT_ERROR_MESSAGE = new InjectionToken(ngDevMode ? 'TUI_DEFAULT_ERROR_MESSAGE' : '', {
factory: tuiExtractI18n('defaultErrorMessage'),
});
/**
* spin i18n texts
*/
const TUI_SPIN_TEXTS = new InjectionToken(ngDevMode ? 'TUI_SPIN_TEXTS' : '', {
factory: tuiExtractI18n('spinTexts'),
});
/**
* calendars i18n texts
*/
const TUI_SHORT_WEEK_DAYS = new InjectionToken(ngDevMode ? 'TUI_SHORT_WEEK_DAYS' : '', {
factory: tuiExtractI18n('shortWeekDays'),
});
const TUI_ICON_START = new InjectionToken(ngDevMode ? 'TUI_ICON_START' : '', {
factory: () => '',
});
const TUI_ICON_END = new InjectionToken(ngDevMode ? 'TUI_ICON_END' : '', {
factory: () => '',
});
const TUI_ICON_REGISTRY = new InjectionToken(ngDevMode ? 'TUI_ICON_REGISTRY' : '', {
factory: () => ({}),
});
/**
* @deprecated: use {@link TUI_ICON_REGISTRY}
*/
const TUI_ICON_STARTS = TUI_ICON_REGISTRY;
function tuiIconsProvider(icons) {
return {
provide: TUI_ICON_REGISTRY,
useFactory: () => ({
...(inject(TUI_ICON_REGISTRY, { skipSelf: true, optional: true }) || {}),
...Object.fromEntries(Object.entries(icons).map(([key, value]) => [
key,
`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(value)}`,
])),
}),
};
}
const TUI_ICON_RESOLVER = new InjectionToken(ngDevMode ? 'TUI_ICON_RESOLVER' : '', {
factory: () => {
const path = inject(TUI_ASSETS_PATH);
return (icon) => `${path}/${icon.replace('@tui.', '').split('.').join('/')}.svg`;
},
});
/**
* @deprecated use {@link TUI_ICON_RESOLVER}
*/
const TUI_ICON_START_RESOLVER = TUI_ICON_RESOLVER;
function tuiInjectIconResolver() {
const icons = inject(TUI_ICON_REGISTRY);
const resolver = inject(TUI_ICON_RESOLVER);
return (icon) => !icon || icon.includes('/') ? icon : (icons[icon] ?? resolver(icon));
}
function tuiIconResolverProvider(useValue) {
return { provide: TUI_ICON_RESOLVER, useValue };
}
/**
* Token for media constant
*/
const TUI_MEDIA = new InjectionToken(ngDevMode ? 'TUI_MEDIA' : '', {
factory: () => ({
mobile: 768,
desktopSmall: 1024,
desktopLarge: 1280,
}),
});
const TUI_DEFAULT_NUMBER_FORMAT = {
precision: NaN,
decimalSeparator: '.',
thousandSeparator: CHAR_NO_BREAK_SPACE,
rounding: 'truncate',
decimalMode: 'pad',
};
/**
* Formatting configuration for displayed numbers
*/
const TUI_NUMBER_FORMAT = new InjectionToken(ngDevMode ? 'TUI_NUMBER_FORMAT' : '', {
factory: () => of(TUI_DEFAULT_NUMBER_FORMAT),
});
function tuiNumberFormatProvider(options) {
return {
provide: TUI_NUMBER_FORMAT,
deps: [[new Optional(), new SkipSelf(), TUI_NUMBER_FORMAT]],
useFactory: (parent) => (parent || of(TUI_DEFAULT_NUMBER_FORMAT)).pipe(map((format) => ({ ...format, ...options }))),
};
}
const TUI_SCROLL_REF = new InjectionToken(ngDevMode ? 'TUI_SCROLL_REF' : '', {
factory: () => new ElementRef(inject(DOCUMENT).documentElement),
});
/**
* A stream of possible selection changes
*/
const TUI_SELECTION_STREAM = new InjectionToken(ngDevMode ? 'TUI_SELECTION_STREAM' : '', {
factory: () => {
const doc = inject(DOCUMENT);
return merge(tuiTypedFromEvent(doc, 'selectionchange'), tuiTypedFromEvent(doc, 'mouseup'), tuiTypedFromEvent(doc, 'mousedown').pipe(switchMap(() => tuiTypedFromEvent(doc, 'mousemove').pipe(takeUntil(tuiTypedFromEvent(doc, 'mouseup'))))), tuiTypedFromEvent(doc, 'keydown'), tuiTypedFromEvent(doc, 'keyup')).pipe(share());
},
});
const TUI_SPIN_ICONS = new InjectionToken(ngDevMode ? 'TUI_SPIN_ICONS' : '', {
factory: () => ({
decrement: '@tui.chevron-left',
increment: '@tui.chevron-right',
}),
});
const TUI_THEME = new InjectionToken(ngDevMode ? 'TUI_THEME' : '', {
factory: () => 'Taiga UI',
});
/**
* Viewport accessor
*/
const TUI_VIEWPORT = new InjectionToken(ngDevMode ? 'TUI_VIEWPORT' : '', {
factory: () => {
const win = inject(WA_WINDOW);
return {
type: 'viewport',
getClientRect() {
const { height = 0, offsetTop = 0 } = win.visualViewport || {};
const rect = {
top: 0,
left: 0,
right: win.innerWidth,
bottom: win.innerHeight,
width: win.innerWidth,
height: height + offsetTop || win.innerHeight,
x: 0,
y: 0,
};
return {
...rect,
toJSON: () => JSON.stringify(rect),
};
},
};
},
});
function tuiAsViewport(accessor) {
return tuiProvide(TUI_VIEWPORT, accessor);
}
/**
* Generated bundle index. Do not edit.
*/
export { TUI_ANIMATIONS_SPEED, TUI_ASSETS_PATH, TUI_AUXILIARY, TUI_CLEAR_WORD, TUI_CLOSE_WORD, TUI_COMMON_ICONS, TUI_DARK_MODE, TUI_DARK_MODE_DEFAULT_KEY, TUI_DARK_MODE_KEY, TUI_DATE_FORMAT, TUI_DAY_TYPE_HANDLER, TUI_DEFAULT_DATE_FORMAT, TUI_DEFAULT_ERROR_MESSAGE, TUI_DEFAULT_NUMBER_FORMAT, TUI_FIRST_DAY_OF_WEEK, TUI_ICON_END, TUI_ICON_REGISTRY, TUI_ICON_RESOLVER, TUI_ICON_START, TUI_ICON_STARTS, TUI_ICON_START_RESOLVER, TUI_MEDIA, TUI_MONTHS, TUI_NOTHING_FOUND_MESSAGE, TUI_NUMBER_FORMAT, TUI_REDUCED_MOTION, TUI_SCROLL_REF, TUI_SELECTION_STREAM, TUI_SHORT_WEEK_DAYS, TUI_SPIN_ICONS, TUI_SPIN_TEXTS, TUI_THEME, TUI_VIEWPORT, tuiAsAuxiliary, tuiAsViewport, tuiAssetsPathProvider, tuiCommonIconsProvider, tuiDateFormatProvider, tuiIconResolverProvider, tuiIconsProvider, tuiInjectIconResolver, tuiNumberFormatProvider };
//# sourceMappingURL=taiga-ui-core-tokens.mjs.map