@talenra/components documentation
  1. Miscellaneous
  2. Variables

Index

rich-text-editor/src/utils/url.utils.ts

BLOCKED_URL_SCHEMES
Type : []
Default value : ['javascript:', 'data:', 'vbscript:', 'file:']

Blocked URL schemes for security (XSS prevention)

button/src/button/button.types.ts

ButtonKind
Type : miscellaneous
Default value : { Ghost: 'ghost', Primary: 'primary', Secondary: 'secondary', } as const

Values accepted by the ButtonComponent's kind property.

Example :
<button talenra-button label="Label" kind="secondary"></button>

Import

Example :
import { ButtonKind } from '@talenra/components/button';
ButtonSize
Type : miscellaneous
Default value : { XS: 'xs', S: 's', M: 'm', } as const

Values accepted by the ButtonComponent's size property.

Example :
<button talenra-button label="Label" size="s"></button>

Import

Example :
import { ButtonSize } from '@talenra/components/button';

checkbox/src/checkbox/checkbox.types.ts

CheckboxLabelPosition
Type : unknown
Default value : { Before: 'before', After: 'after', } as const

Values accepted by the CheckboxComponent's labelPosition input. Determines whether the label is displayed before or after the checkbox.

Example :
<talenra-checkbox formControlName="selectAll" label="Select all" labelPosition="before" />

Import

Example :
import { CheckboxLabelPosition } from '@talenra/components/checkbox';
CheckboxSize
Type : unknown
Default value : { S: 's', M: 'm', } as const

Values accepted by the CheckboxComponent's size input.

Example :
<talenra-checkbox formControlName="username" label="Username" size="s" />

Import

Example :
import { CheckboxSize } from '@talenra/components/checkbox';

overlay/src/layouts/confirmation/confirmation.types.ts

ConfirmationLevel
Type : unknown
Default value : { Info: 'information', Warning: 'warning', Error: 'error', } as const

Values accepted by IConfirmationConfig's level property. ConfirmationLevel represents the different levels of confirmation dialogs.

Example :
private config: IConfirmationConfig = {
  level: ConfirmationLevel.Info,
  message: 'My Confirmation Message',
  confirm: {
    label: 'Button Label',
    action: () => {
      console.log('Confirm clicked');
    },
  },
};

Import

Example :
import { ConfigurationLevel } from '@talenra/components/overlay';

notification/src/notification.config.ts

CONTAINER_CLASS
Type : string
Default value : 'notification-container'

Class name of the notification container DOM element.
CONTAINER_Z_INDEX
Type : number
Default value : 1001

Z-index of the notification container.
DEFAULT_DURATION
Type : number
Default value : 5

Default duration in seconds before auto-dismiss is triggered.
DEFAULT_ICONS
Type : Record<TNotificationLevel, string>
Default value : { [NotificationLevel.Info]: 'info', [NotificationLevel.Success]: 'task-alt', [NotificationLevel.Warning]: 'warning', [NotificationLevel.Error]: 'highlight-off', }

Default icon for each notification level.
TRANSITION_DURATION
Type : number
Default value : 0.6

Cumulated transition duration (transition + transition delay) in seconds. Must sync with transition-duration in stylesheet.

copy-content/src/copy-content/copy-content.types.ts

CopyContentPosition
Type : miscellaneous
Default value : { West: 'west', East: 'east', } as const

Values accepted by Copy-Content's copyContentPosition property. Determines the position of the copy-content-button relative to the hosting element.

Example :
<span textToCopy="Text to copy" copyContentPosition="north">Hover me</span>

Import

Example :
import { CopyContentTypes } from '@talenra/components/copy-content';

date/src/date-filters/date-in-the-future.filter.ts

dateInTheFutureFilter
Type : DateFilterFn
Default value : (allowToday?: boolean) => { const today = new Date(); if (allowToday) { today.setHours(0, 0, 0, 0); } else { today.setHours(23, 59, 59, 59); } return (date: Date) => { return allowToday ? date >= today : date > today; }; }

Filter for days in the future (allowToday: true includes today) Only allows to select dates in the future and greys out other options in the overlay

Example :
// Component class
import { dateInTheFuture } from '@talenra/components/date';
Example :
<!-- Component template -->
<talenra-date [dateFilterFn]="dateInTheFutureFilter(false)"></talenra-date>

date/src/date-filters/date-in-the-past.filter.ts

dateInThePastFilter
Type : DateFilterFn
Default value : (allowToday?: boolean) => { const today = new Date(); if (allowToday) { today.setHours(23, 59, 59, 59); } else { today.setHours(0, 0, 0, 0); } return (date: Date) => { return allowToday ? date <= today : date < today; }; }

Filter for days in the past (allowToday: true includes today) Only allows to select dates in the passt and greys out other options in the overlay

Example :
// Component class
import { dateInThePastFilter } from '@talenra/components/date';
Example :
<!-- Component template -->
<talenra-date [dateFilterFn]="dateInThePastFilter(false)"></talenra-date>

icons/src/pipes/file-type-icon/file-type-icon.ts

fileTypeIcon
Type : unknown
Default value : (type: string): string => { // Try to find an exact match first const exact: string | undefined = FILE_TYPE_ICON_MAP.get(type); if (exact) return exact; // Fallback to category match (e.g., "image/png" -> "image") const category: string = type && type.includes('/') ? type.split('/')[0] : type; const categoryIcon: string | undefined = FILE_TYPE_ICON_MAP.get(category); // Return the icon for the category or the default icon if none found return categoryIcon || 'document-undefined'; }

Transforms a MIME type into a corresponding file type icon name which can be used with the Icon component.

Example :
const iconName = fileTypeIcon('image/png'); // 'document-tif'

Import

Example :
import { fileTypeIcon } from '@talenra/components/icons';

filter-composer/src/filter-composer.types.ts

FilterComposerDateRestriction
Type : unknown
Default value : { Birthday: 'birthday', OnlyFuture: 'only-future', OnlyPast: 'only-past', } as const

Available date filter restrictions for the filter composer.

Import

Example :
import { FilterComposerDateRestriction } from '@talenra/components/filter-composer';
FilterComposerFilterMode
Type : unknown
Default value : { MultiSelect: 'multi-select', SingleSelect: 'single-select', DateRange: 'date-range', CharRange: 'char-range', NumberRange: 'number-range', TextField: 'text-field', Boolean: 'boolean', } as const

Available filter modes for the filter composer.

Import

Example :
import { FilterComposerFilterMode } from '@talenra/components/filter-composer';
FilterComposerOperator
Type : unknown
Default value : { Equal: 'equal', NotEqual: 'notEqual', } as const

Available operators for the filter composer.

Import

Example :
import { FilterComposerOperator } from '@talenra/components/filter-composer';

date/src/date-filters/first-day-of-month.filter.ts

firstDayOfMonthFilter
Type : miscellaneous
Default value : function firstDayOfMonthFilter(date: Date): boolean { return date.getDate() === 1; }

Filter for first day of month. Only allows to select the first day of each month and greys out other options in the overlay

Example :
// Component class
import { firstDayOfMonthFilter } from '@talenra/components/date';
Example :
<!-- Component template -->
<talenra-date [dateFilterFn]="firstDayOfMonthFilter"></talenra-date>

dev-kit/src/format-bytes/format-bytes.ts

formatBytes
Type : unknown
Default value : (bytes: number, opts?: { decimals?: number; unit?: TMemorySize }): string => { const { decimals = 2, unit } = opts || {}; const sizes = Object.values(MemorySize); const k = 1024; const dm = decimals < 0 ? 0 : decimals; // Determine the index of the unit to use, if specified const unitIndex: number = unit ? sizes.map((size) => size.toLowerCase()).indexOf(unit?.toLowerCase()) : -1; // If unit is not specified or if the specified unit is not available, pick the appropriate unit let i = unitIndex >= 0 ? unitIndex : Math.floor(Math.log(Math.abs(bytes)) / Math.log(k)); // Clamp the index to the available units i = Math.min(Math.max(0, i), sizes.length - 1); if (!+bytes) return `0 ${sizes[i]}`; const outputValue: number = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)); // If the output value is 0, return <0.01 of the specified unit while respecting the decimals return outputValue === 0 ? `<${1 / Math.pow(10, dm)} ${sizes[i]}` : `${outputValue} ${sizes[i]}`; }

Format bytes as human-readable text.

Example :
import { formatBytes } from '@talenra/components/dev-kit';
const formatted: string = formatBytes(1024); // '1 KB'

Based on

rich-text-editor/src/rich-text-editor/rich-text-editor.types.ts

FormatType
Type : unknown
Default value : { Bold: 'bold', Italic: 'italic', Underline: 'underline', Strikethrough: 'strikethrough', H1: 'h1', H2: 'h2', H3: 'h3', OrderedList: 'orderedList', UnorderedList: 'unorderedList', Quote: 'quote', Link: 'link', } as const

Values accepted by the RichTextEditorComponent for formatting operations.

Example :
component.applyFormat(FormatType.Bold);

Import

Example :
import { FormatType } from '@talenra/components/rich-text-editor';

form-field/src/form-field/form-field.types.ts

FormFieldSize
Type : miscellaneous
Default value : { S: 's', M: 'm', } as const

Values accepted by the FormField's size property.

Import

Example :
import { FormFieldSize } from '@talenra/components/form-field';
FormFieldStatus
Type : unknown
Default value : { Default: 'default', Invalid: 'invalid', } as const

Values accepted by the FormField's status property.

Import

Example :
import { FormFieldStatus } from '@talenra/components/form-field';

documentation/template-playground/hbs-render.service.ts

Handlebars
Type : any

icons/src/icon/icon.types.ts

IconSize
Type : unknown
Default value : { XS: 'xs', S: 's', M: 'm', } as const

Values accepted by the IconComponent's size property.

Example :
<talenra-icon name="attach-file" size="s" />

Import

Example :
import { IconSize } from '@talenra/components/icon';

input/src/input/input.types.ts

InputType
Type : unknown
Default value : { Email: 'email', Number: 'number', Password: 'password', Search: 'search', Tel: 'tel', Text: 'text', Url: 'url', } as const

Values accepted by the InputComponent's type property.

Example :
<input talenra-input type="email"></button>

Import

Example :
import { InputType } from '@talenra/components/input';

dev-kit/src/interpolate/interpolate.ts

interpolate
Type : unknown
Default value : (template: string, args: Record<string, string | number>): string => { return template.replace(/\{(\w+)\}/g, (match, key) => { return args[key]?.toString() || match; }); }

Replaces placeholders in the given template string with corresponding values from the args object.

Placeholders are defined using curly braces, e.g., {placeholder}.

Example :
const template = "Hello, {name}! You have {count} new messages.";
const params = { name: "Alice", count: 5 };
const result = interpolate(template, params); // "Hello, Alice! You have 5 new messages."

Import

Example :
import { interpolate } from '@talenra/components/dev-kit';

documentation/template-playground/zip-export.service.ts

JSZip
Type : any

dev-kit/src/format-bytes/format-bytes.types.ts

MemorySize
Type : miscellaneous
Default value : { Bytes: 'Bytes', KB: 'KB', MB: 'MB', GB: 'GB', TB: 'TB', PB: 'PB', EB: 'EB', ZB: 'ZB', YB: 'YB', } as const

Values accepted by formatBytes' unit argument.

Example :
<span>{{ 1048 | formatBytes }}</span>
<span>{{ 1048 | formatBytes: { unit: MemorySize.MB } }}</span>

Import

Example :
import { MemorySize } from '@talenra/components/dev-kit';

message/src/message/message.types.ts

MessageKind
Type : unknown
Default value : { Default: 'default', Ghost: 'ghost', } as const

Values accepted by Message's kind property.

Example :
<talenra-message text="My message" kind="ghost"></talenra-message>

Import

Example :
import { MessageKind } from '@talenra/components/message';
MessageLevel
Type : unknown
Default value : { Info: 'info', Error: 'error', Success: 'success', Warning: 'warning', } as const

Values accepted by Message's level property.

Example :
<talenra-message text="My message" level="success"></talenra-message>

Import

Example :
import { MessageLevel } from '@talenra/components/message';
MessageSize
Type : unknown
Default value : { S: 's', M: 'm', } as const

Values accepted by Message's size property.

Example :
<talenra-message text="My message" size="s"></talenra-message>

Import

Example :
import { MessageSize } from '@talenra/components/message';

documentation/template-playground/template-editor.service.ts

monaco
Type : any

notification/src/notification.types.ts

NotificationLevel
Type : unknown
Default value : { Info: 'info', Error: 'error', Success: 'success', Warning: 'warning', } as const

Values accepted by INotificationContext's level property.

Import

Example :
import { NotificationLevel } from '@talenra/components/notification';

config/src/provide-talenra-base-config.ts

OPUS_UI_BASE_CONFIG
Type : unknown
Default value : new InjectionToken<ITalenraBaseConfig>( 'Talenra Config, must implement ITalenraBaseConfig' )

Injection token for providing TalenraBase configuration. Used internally by the provideTalenraBaseConfig function.

Import

Example :
import { OPUS_UI_BASE_CONFIG } from '@talenra/components/config';

paginator/src/paginator/paginator.types.ts

PaginatorAlignment
Type : unknown
Default value : { Left: 'left', Center: 'center', Right: 'right', } as const

Alignment of the paginator. Paginator will take the full width (100%) of the container element. The align property, which takes a PaginatorAlignment value, is used to control the Paginator's alignment.

Example :
<talenra-paginator ... align="right" />
Example :
import { PaginatorAlignment } from '@talenra/components/paginator';

rich-text-editor/src/paste-sanitizing/paste-sanitizing.types.ts

PasteContext
Type : unknown
Default value : { Heading: 'heading', Blockquote: 'blockquote', List: 'list', Link: 'link', Paragraph: 'paragraph', } as const

Values representing the context where a paste operation occurs, determining sanitization rules.

Example :
const context = PasteContext.Paragraph;

Import

Example :
import { PasteContext } from '@talenra/components/rich-text-editor';

dev-kit/src/platform/platform.ts

Platform
Type : unknown
Default value : { Linux: 'linux', MacOS: 'macos', Windows: 'windows', Unknown: 'unknown', } as const

Values returned by the getPlatform function.

Import

Example :
import { Platform } from '@talenra/components/dev-kit';

progress-stepper/src/progress-step/progress-step.types.ts

ProgressStepState
Type : miscellaneous
Default value : { Completed: 'completed', Disabled: 'disabled', Pending: 'pending', Selected: 'selected', } as const

ProgressStep state

Import

Example :
import { ProgressStepState } from '@talenra/components/progress-stepper';

query-builder/src/query-builder.types.ts

QueryBuilderCondition
Type : unknown
Default value : { And: 'and', Or: 'or', } as const

Conditions accepted by the query. The operator is used to determine the type of comparison that is to be performed.

Import

Example :
import { QueryBuilderCondition } from '@talenra/components/query-builder';
QueryBuilderDateOperator
Type : unknown
Default value : { Equal: 'equal', NotEqual: 'notEqual', Before: 'before', After: 'after', BeforeOrEqual: 'beforeOrEqual', AfterOrEqual: 'afterOrEqual', } as const

Operators accepted by the query selection rule in which the type of value is a date. The operator is used to determine the type of comparison that is to be performed.

Import

Example :
import { QueryBuilderDateOperator } from '@talenra/components/query-builder';
QueryBuilderNumberOperator
Type : unknown
Default value : { Equal: 'equal', NotEqual: 'notEqual', Greater: 'greater', Lesser: 'lesser', GreaterOrEqual: 'greaterOrEqual', LesserOrEqual: 'lesserOrEqual', } as const

Operators accepted by the query selection rule in which the type of value is a number. The operator is used to determine the type of comparison that is to be performed.

Import

Example :
import { QueryBuilderNumberOperator } from '@talenra/components/query-builder';
QueryBuilderOptionOperator
Type : unknown
Default value : { Contains: 'contains', NotContains: 'notContains', } as const

Operators accepted by the query selection rule in which the type of value is an option of multiple strings. The operator is used to determine the type of comparison that is to be performed.

Import

Example :
import { QueryBuilderOptionOperator } from '@talenra/components/query-builder';
QueryBuilderRuleAction
Type : unknown
Default value : { AddRule: 'addRule', AddRuleGroup: 'addRuleGroup', DeleteElement: 'deleteElement', ConditionChange: 'conditionChange', } as const

Actions that can be performed on rules of a query.

Import

Example :
import { QueryBuilderRuleAction } from '@talenra/components/query-builder';
QueryBuilderStringOperator
Type : unknown
Default value : { Equal: 'equal', NotEqual: 'notEqual', StartsWith: 'startsWith', EndsWith: 'endsWith', NotStartsWith: 'notStartsWith', NotEndsWith: 'notEndsWith', Contains: 'contains', NotContains: 'notContains', From: 'from', To: 'to', } as const

Operators accepted by the query selection rule in which the type of value is a string. The operator is used to determine the type of comparison that is to be performed.

Import

Example :
import { QueryBuilderStringOperator } from '@talenra/components/query-builder';
QueryBuilderValueType
Type : unknown
Default value : { String: 'string', Option: 'option', Number: 'number', Date: 'date', Boolean: 'boolean', } as const

Value types accepted by the query selection rule. The value type is used to determine the type of comparison that is to be performed.

Import

Example :
import { QueryBuilderValueType } from '@talenra/components/query-builder';

search/src/search-field/search-field.types.ts

SearchFieldSize
Type : miscellaneous
Default value : { S: 's', M: 'm', } as const

Values accepted by the SearchField's spacing property.

Import

Example :
import { SearchFieldSize } from '@talenra/components/search';

search/src/search-input/search-input.types.ts

SearchKind
Type : unknown
Default value : { Default: 'default', NoIndent: 'no-indent', } as const

Values accepted by the kind property of the SearchInput component.

Example :
<input talenra-search kind="no-indent"></button>

Import

Example :
import { SearchKind } from '@talenra/components/search';

select/src/select/select.types.ts

SelectKind
Type : unknown
Default value : { Ghost: 'ghost', Primary: 'primary', } as const

Values accepted by the Select's kind property.

Example :
<talenra-select kind="ghost">
<!-- ... -->
</talenra-select>

Import

Example :
import { SelectKind } from '@talenra/components/select';

spinner/src/spinner/spinner.types.ts

SpinnerColor
Type : miscellaneous
Default value : { Black30: 'black-30', Black60: 'black-60', Primary: 'primary', White: 'white', } as const

Values accepted by the Spinner's color property.

Example :
<talenra-spinner color="white" />

Import

Example :
import { SpinnerColor } from '@talenra/components/spinner';
SpinnerSize
Type : miscellaneous
Default value : { XS: 'xs', S: 's', M: 'm', } as const

Values accepted by the Spinner's size property.

Example :
<talenra-spinner size="s" />

Import

Example :
import { SpinnerSize } from '@talenra/components/spinner';

table/src/table/table.types.ts

TableColumnHAlign
Type : unknown
Default value : { Center: 'center', Left: 'left', Right: 'right', } as const

Values accepted by the TableColumn's align property.

Import

Example :
import { TableColumnHAlign } from '@talenra/components/table';
TableSelectionMode
Type : miscellaneous
Default value : { None: 'none', SingleRow: 'single row', MultiRow: 'multi row', } as const

Values accepted by Table's selectionMode property.

Example :
<talenra-table [data]="data" selectionMode="single row" />

Import

Example :
import { TableSelectionMode } from '@talenra/components/table';
TableSortDirection
Type : unknown
Default value : { Ascending: 'ascending', Descending: 'descending', } as const

Values accepted by TableSort's direction property. *

Import

Example :
import { TableSortDirection } from '@talenra/components/table';

tabs/src/tab-list/tab-list.types.ts

TabListSize
Type : unknown
Default value : { S: 's', M: 'm', } as const

Values accepted by the TabListComponent's size property.

Example :
<talenra-tab-list size="s">...</talenra-tab-list>

Import

Example :
import { TabListSize } from '@talenra/components/tabs';
TabWidth
Type : unknown
Default value : { Strict: 'strict', Dynamic: 'dynamic', } as const

Values accepted by the TabListComponent's tabWidth property.

Example :
<talenra-tab-list tabWidth="dynamic">...</talenra-tab-list>

Import

Example :
import { TabWidth } from '@talenra/components/tabs';

locales/translations.ts

TalenraBaseTranslations
Type : object
Default value : { enGB, deCH, frCH, itCH }

Available translation dictionaries for TalenraBase components. Contains translations for English (GB), German (CH), French (CH), and Italian (CH) locales.

Example :
import { TalenraBaseTranslations } from '@talenra/components/locales';
import { provideTalenraBaseConfig } from '@talenra/components/config';

// Access a specific locale
const germanTranslations = TalenraBaseTranslations.deCH.translations;

// Use with configuration provider
export const appConfig: ApplicationConfig = {
  providers: [
    provideTalenraBaseConfig({
      translation: TalenraBaseTranslations.frCH.translations
    })
  ]
};

Import

Example :
import { TalenraBaseTranslations } from '@talenra/components/locales';

rich-text-editor/src/rich-text-editor.config.ts

TOOLBAR_MIN_WIDTH
Type : unknown
Default value : 11 * 24 + 10 * 16

Minimum toolbar width (in pixels) for expanded view. Below this width, the toolbar collapses formatting buttons into a "More" menu.

11 buttons (24px), 10 spaces (16px) Total: 424px

tooltip/src/tooltip/tooltip.types.ts

TooltipPosition
Type : miscellaneous
Default value : { South: 'south', West: 'west', North: 'north', East: 'east', } as const

Values accepted by Toolltip's talenraTooltipPosition property. Determines the position of the tooltip relative to the hosting element.

Example :
<span talenraTooltip="Tooltip text" talenraTooltipPosition="north">Hover me</span>

Import

Example :
import { TooltipPosition } from '@talenra/components/tooltip';

progress-stepper/src/progress-stepper-body/progress-stepper-body.config.ts

TRANSITION_DELAY
Type : number
Default value : 0.15

Transition (switching step) delay in seconds. Must match the CSS transition delay.
TRANSITION_DURATION
Type : number
Default value : 0.3

Transition (switching step) duration in seconds. Must match the CSS transition duration.

app-layout/src/header-drawer/header-drawer.config.ts

TRANSITION_DURATION
Type : number
Default value : 0.4

Transition duration in sec

upload/src/upload.types.ts

UploadState
Type : miscellaneous
Default value : { Pending: 'pending', Uploading: 'uploading', Uploaded: 'uploaded', Error: 'error', } as const

File upload states supported by the Upload component.

Import

Example :
import { UploadState } from '@talenra/components/upload';
UploadValidationState
Type : unknown
Default value : { Valid: 'valid', FileSizeExceed: 'fileSizeExceed', OverallSizeExceed: 'overallSizeExceed', MaxFilesExceed: 'maxFilesExceed', FileTypeNotAccepted: 'fileTypeNotAccepted', Duplicate: 'duplicate', } as const

Item validation states supported by the Upload component.

Import

Example :
import { UploadValidationState } from '@talenra/components/upload';

src/public-api.ts

version
Type : string
Default value : LIB_VERSION

Current version of the library (e.g. "1.0.0", "1.1.0-rc.0")

Example :
import { version } from '@talenra/components';
console.log(version);

date/src/date-filters/weekdays.filter.ts

weekdaysFilter
Type : miscellaneous
Default value : function weekdaysFilter(date: Date): boolean { return !!(date && new Date(date).getDay() % 6); }

Filter for weekdays (Monday - Friday) Only allows to select weekdays and greys out other options in the overlay

Example :
// Component class
import { weekdaysFilter } from '@talenra/components/date';
Example :
<!-- Component template -->
<talenra-date [dateFilterFn]="weekdsaysFilter"></talenra-date>

app-layout/src/workspace.types.ts

WorkspaceWidth
Type : miscellaneous
Default value : { XS: 'xs', S: 's', M: 'm', L: 'l', Max: 'max', } as const

Layout widths supported by workspace layouts (e.g. WorkspaceSimple).

Example :
<talenra-workspace-simple width="s"></talenra-workspace-simple>

Import

Example :
import { WorkspaceWidth } from '@talenra/components/app-layout';

results matching ""

    No results matching ""