carbon-components-angular documentation
  1. Miscellaneous
  2. Variables

Index

src/utils/window-tools.ts

_scrollbarWidth
Default value : -1

src/utils/utils.module.ts

ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER
Type : object
Default value : { provide: AnimationFrameServiceSingleton, deps: [[new Optional(), new SkipSelf(), AnimationFrameServiceSingleton], NgZone], useFactory: ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY }
DOCUMENT_SERVICE_PROVIDER
Type : object
Default value : { provide: DocumentService, deps: [[new Optional(), new SkipSelf(), DocumentService]], useFactory: DOCUMENT_SERVICE_PROVIDER_FACTORY }

src/datepicker/carbon-flatpickr-month-select.ts

carbonFlatpickrMonthSelectPlugin
Default value : fp => { const setupElements = () => { if (!fp.monthElements || !fp.yearElements) { return; } fp.monthElements.forEach(elem => { if (!elem.parentNode) { return; } elem.parentNode.removeChild(elem); }); fp.monthElements.splice( 0, fp.monthElements.length, ...fp.monthElements.map(() => { // eslint-disable-next-line no-underscore-dangle const monthElement = fp._createElement( "span", config.classFlatpickrCurrentMonth ); monthElement.textContent = monthToStr( fp.currentMonth, config.shorthand === true, fp.l10n ); fp.yearElements[0] .closest(config.selectorFlatpickrMonthYearContainer) .insertBefore( monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer) ); return monthElement; }) ); }; const updateCurrentMonth = () => { if (!fp.yearElements) { return; } const monthStr = monthToStr( fp.currentMonth, config.shorthand === true, fp.l10n ); fp.yearElements.forEach(elem => { const currentMonthContainer = elem.closest( config.selectorFlatpickrMonthYearContainer ); Array.prototype.forEach.call( currentMonthContainer.querySelectorAll(".cur-month"), monthElement => { monthElement.textContent = monthStr; } ); }); }; const register = () => { fp.loadedPlugins.push("carbonFlatpickrMonthSelectPlugin"); }; return { onMonthChange: updateCurrentMonth, onValueUpdate: updateCurrentMonth, onOpen: updateCurrentMonth, onReady: [setupElements, updateCurrentMonth, register] }; }
config
Type : object
Default value : { selectorInit: "[data-date-picker]", selectorDatePickerInput: "[data-date-picker-input]", selectorDatePickerInputFrom: "[data-date-picker-input-from]", selectorDatePickerInputTo: "[data-date-picker-input-to]", selectorDatePickerIcon: "[data-date-picker-icon]", selectorFlatpickrMonthYearContainer: ".flatpickr-current-month", selectorFlatpickrYearContainer: ".numInputWrapper", selectorFlatpickrCurrentMonth: ".cur-month", classCalendarContainer: `cds--date-picker__calendar`, classMonth: `cds--date-picker__month`, classWeekdays: `cds--date-picker__weekdays`, classDays: `cds--date-picker__days`, classWeekday: `cds--date-picker__weekday`, classDay: `cds--date-picker__day`, classFocused: `cds--focused`, classVisuallyHidden: `cds--visually-hidden`, classFlatpickrCurrentMonth: "cur-month", attribType: "data-date-picker-type", dateFormat: "m/d/Y", shorthand: false }
monthToStr
Default value : (monthNumber, shorthand, locale) => locale.months[shorthand ? "shorthand" : "longhand"][monthNumber]

This is from carbon-components. We need it to format the month select according to specs. Carbon currently doesn't expose this as a seperate package, and we don't import the carbon-components js (on purpose) so some copy pasta is required

ref: https://github.com/carbon-design-system/carbon/blob/ f06f38f0c2ef624e409a3d5711e897a79f4c88fc/packages/components/src/components/date-picker/date-picker.js#L52-L123

src/tooltip/tooltip.interface.ts

DEFAULT_TOOLTIP_CONFIG
Type : object
Default value : { align: "bottom" as TooltipAlignments, caret: true, dropShadow: true, highContrast: true, isOpen: false, enterDelayMs: 100, leaveDelayMs: 300 }

Default tooltip configuration for components to populate missing interface attributes

src/dropdown/dropdown.service.ts

defaultOffset
Type : object
Default value : { top: 0, left: 0 }

src/checkbox/checkbox-exported-tests.ts

defaults
Type : object
Default value : { selectors: { root: "cds-checkbox", input: "input" } }

src/experimental/experimental.module.ts

EXPERIMENTAL_SERVICE_PROVIDER
Type : object
Default value : { provide: ExperimentalService, deps: [[new Optional(), new SkipSelf(), ExperimentalService]], useFactory: EXPERIMENTAL_SERVICE_PROVIDER_FACTORY }

src/utils/event-observable.ts

getEventObservable
Default value : (targetElement: HTMLElement | Element, eventType: string): Observable<Event> => { switch (eventType) { case "scroll": case "resize": case "touchstart": case "touchmove": case "touchend": return fromEvent(targetElement, eventType, { passive: true }); default: return fromEvent(targetElement, eventType); } }

src/utils/scroll.ts

getScrollableParents
Default value : (node: HTMLElement) => { const elements = [document.body]; while (node.parentElement && node !== document.body) { if (isScrollableElement(node)) { elements.push(node); } node = node.parentElement; } return elements; }
hasScrollableParents
Default value : (node: HTMLElement) => { while (node.parentElement && node !== document.body) { if (isScrollableElement(node)) { return true; } node = node.parentElement; } return false; }
isScrollableElement
Default value : (element: HTMLElement) => { const computedStyle = getComputedStyle(element); return ( computedStyle.overflow === "auto" || computedStyle.overflow === "scroll" || computedStyle["overflow-y"] === "auto" || computedStyle["overflow-y"] === "scroll" || computedStyle["overflow-x"] === "auto" || computedStyle["overflow-x"] === "scroll" ); }

Checks if a given element is scrollable. If the element has an overflow set as part of its computed style it can scroll.
isVisibleInContainer
Default value : (element: HTMLElement, container: HTMLElement) => { const elementRect = element.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); // If there exists `height: 100%` on the `html` or `body` tag of an application, // it causes the calculation to return true if you need to scroll before the element is seen. // In that case we calculate its visibility based on the window viewport. if (container.tagName === "BODY" || container.tagName === "HTML") { // This checks if element is within the top, bottom, left and right of viewport, ie. if the element is visible in // the screen. This also takes into account partial visibility of an element. const isAboveViewport = elementRect.top < 0 && (elementRect.top + element.clientHeight) < 0; const isLeftOfViewport = elementRect.left < 0; const isBelowViewport = (elementRect.bottom - element.clientHeight) > (window.innerHeight || document.documentElement.clientHeight); const isRightOfViewport = elementRect.right > (window.innerWidth || document.documentElement.clientWidth); const isVisibleInViewport = !(isAboveViewport || isBelowViewport || isLeftOfViewport || isRightOfViewport); return isVisibleInViewport; } return ( // This also accounts for partial visibility. It will still return true if the element is partially visible inside the container. (elementRect.bottom - element.clientHeight) <= (containerRect.bottom + (container.offsetHeight - container.clientHeight) / 2) && elementRect.top >= (- element.clientHeight) ); }

Checks if an element is visible within a container
scrollableParentsObservable
Default value : (node: HTMLElement): Observable<Event> => { const windowScroll = fromEvent(window, "scroll", { passive: true }).pipe(map(event => ( // update the event target to be something useful. In this case `body` is a sensible replacement Object.assign({}, event, { target: document.body }) as Event ))); let observables = [windowScroll]; // walk the parents and subscribe to all the scroll events we can while (node.parentElement && node !== document.body) { if (isScrollableElement(node)) { observables.push(fromEvent(node, "scroll", { passive: true })); } node = node.parentElement; } return merge(...observables); }

Returns an observable that emits whenever any scrollable parent element scrolls

src/i18n/i18n.module.ts

I18N_SERVICE_PROVIDER
Type : object
Default value : { provide: I18n, deps: [[new Optional(), new SkipSelf(), I18n]], useFactory: I18N_SERVICE_PROVIDER_FACTORY }

src/icon/icon.module.ts

ICON_SERVICE_PROVIDER
Type : object
Default value : { provide: IconService, deps: [[new Optional(), new SkipSelf(), IconService]], useFactory: ICON_SERVICE_PROVIDER_FACTORY }

src/layer/layer.directive.ts

MAX_LEVEL
Type : number
Default value : 2

src/utils/object.ts

merge
Default value : (target, ...objects) => { for (const object of objects) { for (const key in object) { if (object.hasOwnProperty(key)) { // since we're dealing just with JSON this simple check should be enough if (object[key] instanceof Object) { if (!target[key]) { target[key] = {}; } // recursively merge into the target // most translations only run 3 or 4 levels deep, so no stack explosions target[key] = merge(target[key], object[key]); } else { target[key] = object[key]; } } } } return target; }

src/breadcrumb/breadcrumb.component.ts

MINIMUM_OVERFLOW_THRESHOLD
Type : number
Default value : 4

src/file-uploader/file-uploader.component.ts

noop
Default value : () => { }

src/placeholder/placeholder.module.ts

PLACEHOLDER_SERVICE_PROVIDER
Type : object
Default value : { provide: PlaceholderService, deps: [[new Optional(), new SkipSelf(), PlaceholderService]], useFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY }

src/dialog/overflow-menu/overflow-menu-option.component.ts

REL
Type : string
Default value : "noreferrer noopener"

Security HTML anchor rel when target is set

src/i18n/i18n.service.ts

replace
Default value : (subject, variables) => subject.pipe( map<string, void>(str => { const keys = Object.keys(variables); for (const key of keys) { const value = variables[key]; str = str.replace(new RegExp(`{{\\s*${key}\\s*}}`, "g"), value); } return str; }) )

Takes the Observable returned from i18n.get and an object of variables to replace.

The keys specify the variable name in the string.

Example:

Example :
service.set({ "TEST": "{{foo}} {{bar}}" });

service.replace(service.get("TEST"), { foo: "test", bar: "asdf" })

Produces: "test asdf"

src/common/tab.service.ts

tabbableSelector
Default value : "a[href], area[href], input:not([disabled]):not([tabindex=\'-1\']), " + "button:not([disabled]):not([tabindex=\'-1\']),select:not([disabled]):not([tabindex=\'-1\']), " + "textarea:not([disabled]):not([tabindex=\'-1\']), " + "iframe, object, embed, *[tabindex]:not([tabindex=\'-1\']), *[contenteditable=true]"
tabbableSelectorIgnoreTabIndex
Default value : "a[href], area[href], input:not([disabled]), " + "button:not([disabled]),select:not([disabled]), " + "textarea:not([disabled]), " + "iframe, object, embed, *[tabindex], *[contenteditable=true]"

src/dropdown/dropdowntools.ts

treetools
Type : object
Default value : { /** finds an item in a set of items and returns the item and path to the item as an array */ find: function(items, itemToFind, path = []) { let found; for (let i of items) { if (i === itemToFind) { path.push(i); found = i; } if (i.items && !found) { path.push(i); found = this.find(i.items, itemToFind, path).found; if (!found) { path = []; } } } return {found, path}; } }

bundle of functions to aid in manipulating tree structures

results matching ""

    No results matching ""