weaver-components documentation
  1. Miscellaneous
  2. Variables

Index

projects/wvr-elements/src/lib/core/actions.ts

actions
Type : object
Default value : { Layout, Manifest, MessageManifest, Modal, Rest, Theme, Wysiwyg }

projects/wvr-elements/src/lib/core/manifest/manifest.reducers.ts

adapter
Type : EntityAdapter<Manifest>
Default value : createEntityAdapter<Manifest>({ selectId: selectManifestByName })
initialState
Type : State
Default value : adapter.getInitialState({ pendingRequests: [], currentRequest: undefined })
manifestReducer
Default value : createReducer( initialState, on(ManifestActions.addManifest, (state, { manifest }) => adapter.addOne(manifest, state)), on(ManifestActions.setManifest, (state, { manifest }) => adapter.setOne(manifest, state)), on(ManifestActions.upsertManifest, (state, { manifest }) => adapter.upsertOne(manifest, state)), on(ManifestActions.addManifests, (state, { manifests }) => adapter.addMany(manifests, state)), on(ManifestActions.upsertManifests, (state, { manifests }) => adapter.upsertMany(manifests, state)), on(ManifestActions.updateManifest, (state, { update }) => adapter.updateOne(update, state)), on(ManifestActions.updateManifests, (state, { updates }) => adapter.updateMany(updates, state)), on(ManifestActions.mapManifest, (state, { entityMap }) => adapter.mapOne(entityMap, state)), on(ManifestActions.mapManifests, (state, { entityMap }) => adapter.map(entityMap, state)), on(ManifestActions.deleteManifest, (state, { id }) => adapter.removeOne(id, state)), on(ManifestActions.deleteManifests, (state, { ids }) => adapter.removeMany(ids, state)), on(ManifestActions.deleteManifestsByPredicate, (state, { predicate }) => adapter.removeMany(predicate, state)), on(ManifestActions.loadManifests, (state, { manifests }) => adapter.setAll(manifests, state)), on(ManifestActions.clearManifests, state => adapter.removeAll({ ...state, selectedManifestId: undefined })), // tslint:disable-next-line:arrow-return-shorthand on(ManifestActions.submitRequest, (state, { request }) => { return { ...state, currentRequest: request // tslint:disable-next-line:semicolon } }), // tslint:disable-next-line:arrow-return-shorthand on(ManifestActions.submitRequestSuccess, (state, { request, response, manifest }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: state.entities[manifest.name].entries.map(entry => { if (entry.name === request.entryName) { return { ...entry, request, response }; } // tslint:disable-next-line:arrow-return-shorthand return entry; }) } }, { ...state, currentRequest: undefined }); }), // tslint:disable-next-line:arrow-return-shorthand on(ManifestActions.submitRequestFailure, (state, { request, response, manifest }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: state.entities[manifest.name].entries.map(entry => { if (entry.name === request.entryName) { return { ...entry, request, response }; } return entry; }) } }, { ...state, currentRequest: undefined }); }), // tslint:disable-next-line:arrow-return-shorthand on(ManifestActions.queueRequest, (state, { request }) => { return { ...state, pendingRequests: state.pendingRequests.concat([{ ...request }]), currentRequest: undefined }; }), // tslint:disable-next-line:arrow-return-shorthand on(ManifestActions.dequeueRequest, (state, { request }) => { return { ...state, pendingRequests: state.pendingRequests.filter(r => r.manifestName !== request.manifestName || r.entryName !== request.entryName) }; }) )
selectAllManifests
Default value : selectAll
selectCurrentRequest
Default value : (state: State) => state.currentRequest
selectManifestEntities
Default value : selectEntities
selectManifestNames
Default value : selectIds
selectManifestTotal
Default value : selectTotal
selectPendingRequests
Default value : (state: State) => state.pendingRequests
Default value : adapter.getSelectors()

projects/wvr-elements/src/lib/core/message-manifest/message-manifest.reducers.ts

adapter
Type : EntityAdapter<MessageManifest>
Default value : createEntityAdapter<MessageManifest>({ selectId: selectManifestByName })
initialState
Type : MessageManifestState
Default value : adapter.getInitialState({ pendingMessages: [], currentMessage: undefined })
messageManifestReducer
Default value : createReducer( initialState, on(MessageManifestActions.addManifest, (state, { manifest }) => adapter.addOne(manifest, state)), on(MessageManifestActions.addManifests, (state, { manifests }) => adapter.addMany(manifests, state)), on(MessageManifestActions.clearManifests, state => adapter.removeAll({ ...state, selectedMessageManifestId: undefined })), on(MessageManifestActions.deleteManifest, (state, { id }) => adapter.removeOne(id, state)), on(MessageManifestActions.deleteManifests, (state, { ids }) => adapter.removeMany(ids, state)), on(MessageManifestActions.deleteManifestsByPredicate, (state, { predicate }) => adapter.removeMany(predicate, state)), on(MessageManifestActions.loadManifests, (state, { manifests }) => adapter.setAll(manifests, state)), on(MessageManifestActions.mapManifest, (state, { entityMap }) => adapter.mapOne(entityMap, state)), on(MessageManifestActions.mapManifests, (state, { entityMap }) => adapter.map(entityMap, state)), on(MessageManifestActions.setManifest, (state, { manifest }) => adapter.setOne(manifest, state)), on(MessageManifestActions.updateManifest, (state, { update }) => adapter.updateOne(update, state)), on(MessageManifestActions.updateManifests, (state, { updates }) => adapter.updateMany(updates, state)), on(MessageManifestActions.upsertManifest, (state, { manifest }) => adapter.upsertOne(manifest, state)), on(MessageManifestActions.upsertManifests, (state, { manifests }) => adapter.upsertMany(manifests, state)), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.receiveMessage, (state, { manifest, entry, message }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: state.entities[manifest.name].entries.map(e => e.name === entry.name ? { ...e, message } : e) } }, { ...state, currentMessage: undefined }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.submitMessage, (state, { message }) => { return { ...state, currentMessage: message // tslint:disable-next-line:semicolon } }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.submitMessageSuccess, (state, { manifest, message }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: state.entities[manifest.name].entries.map(e => e.name === message.entryName ? { ...e, message } : e) } }, { ...state, currentMessage: undefined }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.submitMessageFailure, (state, { manifest, message }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: state.entities[manifest.name].entries.map(e => e.name === message.entryName ? { ...e, message } : e) } }, { ...state, currentMessage: undefined }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.queueMessage, (state, { message }) => { return { ...state, pendingMessages: state.pendingMessages.concat([{ ...message }]), currentMessage: undefined }; }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.dequeueMessage, (state, { message }) => { return { ...state, pendingMessages: state.pendingMessages.filter(m => m.manifestName !== message.manifestName || m.entryName !== message.entryName) }; }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.connectManifest, (state, { manifest }) => { return adapter.updateOne({ id: manifest.name, changes: { connection: { status: ConnectionStatus.CONNECTING, frame: undefined } } }, { ...state }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.connectManifestConnected, (state, { manifest, frame }) => { return adapter.updateOne({ id: manifest.name, changes: { connection: { status: ConnectionStatus.CONNECTED, frame } } }, { ...state }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.disconnectManifest, (state, { manifest }) => { return adapter.updateOne({ id: manifest.name, changes: { connection: { status: ConnectionStatus.DISCONNECTING, frame: undefined } } }, { ...state }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.disconnectManifestDisconnected, (state, { manifest, frame }) => { return adapter.updateOne({ id: manifest.name, changes: { connection: { status: ConnectionStatus.DISCONNECTED, frame } } }, { ...state }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.subscribeManifestSuccess, (state, { manifest, entry, subscription }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: state.entities[manifest.name].entries.map(e => e.name === entry.name ? { ...e, id: subscription.id } : e) } }, { ...state }); }), // tslint:disable-next-line:arrow-return-shorthand on(MessageManifestActions.unsubscribeManifestSuccess, (state, { manifest, entry }) => { return adapter.updateOne({ id: manifest.name, changes: { entries: manifest.entries.filter(e => e.name !== entry.name) } }, { ...state }); }) )
selectAllManifests
Default value : selectAll
selectCurrentMessage
Default value : (state: MessageManifestState) => state.currentMessage
selectManifestEntities
Default value : selectEntities
selectManifestNames
Default value : selectIds
selectManifestTotal
Default value : selectTotal
selectPendingMessage
Default value : (state: MessageManifestState) => state.pendingMessages
Default value : adapter.getSelectors()

projects/wvr-elements/src/lib/core/modal/modal.reducers.ts

adapter
Type : EntityAdapter<Modal>
Default value : createEntityAdapter<Modal>({ selectId: selectModalByName })
initialState
Type : State
Default value : adapter.getInitialState()
reducer
Default value : createReducer( initialState, on(ModalActions.addModal, (state, { modal }) => adapter.addOne(modal, state)), on(ModalActions.closeModal, (state, { id }) => adapter.updateOne({ id, changes: { open: false } }, { ...state })), on(ModalActions.openModal, (state, { id }) => adapter.updateOne({ id, changes: { open: true } }, { ...state })) )

projects/wvr-elements/src/lib/core/wysiwyg/wysiwyg.reducers.ts

adapter
Type : EntityAdapter<Wysiwyg>
Default value : createEntityAdapter<Wysiwyg>({ selectId: selectWysiwygById })
initialState
Type : State
Default value : adapter.getInitialState()
reducer
Default value : createReducer( initialState, on(WysiwygActions.addWysiwyg, (state, { wysiwyg }) => adapter.addOne(wysiwyg, state)), on(WysiwygActions.saveWysiwyg, (state, { id, content }) => adapter.updateOne({ id, changes: { initialContent: content, content } }, { ...state })), on(WysiwygActions.resetWysiwyg, (state, { id }) => adapter.updateOne({ id, changes: { content: state.entities[id].initialContent } }, { ...state })) )

projects/wvr-elements/src/lib/core/theme/theme.actions.ts

add
Default value : createAction( '[Theme] Add', props<{ name: string, theme: ThemeVariants }>() )
select
Default value : createAction( '[Theme] Select', props<{ name: string}>() )

projects/wvr-elements/src/lib/core/manifest/manifest.actions.ts

addManifest
Default value : createAction('[Manifest] Add Manifest', props<{ manifest: Manifest }>())
addManifests
Default value : createAction('[Manifest] Add Manifests', props<{ manifests: Array<Manifest> }>())
clearManifests
Default value : createAction('[Manifest] Clear Manifests')
deleteManifest
Default value : createAction('[Manifest] Delete Manifest', props<{ id: string }>())
deleteManifests
Default value : createAction('[Manifest] Delete Manifests', props<{ ids: Array<string> }>())
deleteManifestsByPredicate
Default value : createAction( '[Manifest] Delete Manifests By Predicate', props<{ predicate: Predicate<Manifest> }>())
dequeueRequest
Default value : createAction( '[Manifest] Dequeue Request', props<{ request: ManifestEntryRequest }>() )
loadManifests
Default value : createAction('[Manifest] Load Manifests', props<{ manifests: Array<Manifest> }>())
mapManifest
Default value : createAction('[Manifest] Map Manifest', props<{ entityMap: EntityMapOne<Manifest> }>())
mapManifests
Default value : createAction('[Manifest] Map Manifests', props<{ entityMap: EntityMap<Manifest> }>())
queueRequest
Default value : createAction( '[Manifest] Queue Request', props<{ request: ManifestEntryRequest }>() )
setManifest
Default value : createAction('[Manifest] Set Manifest', props<{ manifest: Manifest }>())
submitRequest
Default value : createAction( '[Manifest] Submit Request', props<{ request: ManifestEntryRequest }>() )
submitRequestFailure
Default value : createAction( '[Manifest] Submit Request Failure', props<{ manifest: Manifest, request: ManifestEntryRequest, response: any }>() )
submitRequestSuccess
Default value : createAction( '[Manifest] Submit Request Success', props<{ manifest: Manifest, request: ManifestEntryRequest, response: any }>() )
updateManifest
Default value : createAction('[Manifest] Update Manifest', props<{ update: Update<Manifest> }>())
updateManifests
Default value : createAction('[Manifest] Update Manifests', props<{ updates: Array<Update<Manifest>> }>())
upsertManifest
Default value : createAction('[Manifest] Upsert Manifest', props<{ manifest: Manifest }>())
upsertManifests
Default value : createAction('[Manifest] Upsert Manifests', props<{ manifests: Array<Manifest> }>())

projects/wvr-elements/src/lib/core/message-manifest/message-manifest.actions.ts

addManifest
Default value : createAction('[Message Manifest] Add Manifest', props<{ manifest: MessageManifest }>())
addManifests
Default value : createAction('[Message Manifest] Add Manifests', props<{ manifests: Array<MessageManifest> }>())
clearManifests
Default value : createAction('[Message Manifest] Clear Manifests')
connectManifest
Default value : createAction( '[Message Manifest] Connect', props<{ manifest: MessageManifest }>() )
connectManifestConnected
Default value : createAction( '[Message Manifest] Connected', props<{ manifest: MessageManifest, frame: any }>() )
connectManifestFailure
Default value : createAction( '[Message Manifest] Connect Failure', props<{ manifest: MessageManifest }>() )
connectManifestSuccess
Default value : createAction( '[Message Manifest] Connect Success', props<{ manifest: MessageManifest }>() )
deleteClient
Default value : createAction( '[Message Manifest] Delete Client', props<{ manifest: MessageManifest }>() )
deleteManifest
Default value : createAction('[Message Manifest] Delete Manifest', props<{ id: string }>())
deleteManifests
Default value : createAction('[Message Manifest] Delete Manifests', props<{ ids: Array<string> }>())
deleteManifestsByPredicate
Default value : createAction( '[Message Manifest] Delete Manifests By Predicate', props<{ predicate: Predicate<MessageManifest> }>() )
dequeueMessage
Default value : createAction( '[Message Manifest] Dequeue Message', props<{ message: MessageManifestEntryMessage }>() )
disconnectManifest
Default value : createAction( '[Message Manifest] Disconnect', props<{ manifest: MessageManifest }>() )
disconnectManifestDisconnected
Default value : createAction( '[Message Manifest] Disconnected', props<{ manifest: MessageManifest, frame: any }>() )
disconnectManifestFailure
Default value : createAction( '[Message Manifest] Disconnect Failure', props<{ manifest: MessageManifest }>() )
disconnectManifestSuccess
Default value : createAction( '[Message Manifest] Disconnect Success', props<{ manifest: MessageManifest }>() )
loadManifests
Default value : createAction('[Message Manifest] Load Manifests', props<{ manifests: Array<MessageManifest> }>())
mapManifest
Default value : createAction('[Message Manifest] Map Manifest', props<{ entityMap: EntityMapOne<MessageManifest> }>())
mapManifests
Default value : createAction('[Message Manifest] Map Manifests', props<{ entityMap: EntityMap<MessageManifest> }>())
queueMessage
Default value : createAction( '[Message Manifest] Queue Message', props<{ message: MessageManifestEntryMessage }>() )
receiveMessage
Default value : createAction( '[Message Manifest] Receive Message', props<{ manifest: MessageManifest, entry: MessageManifestEntry, message: any }>() )
setManifest
Default value : createAction('[Message Manifest] Set Manifest', props<{ manifest: MessageManifest }>())
submitMessage
Default value : createAction( '[Message Manifest] Submit Message', props<{ message: MessageManifestEntryMessage }>() )
submitMessageFailure
Default value : createAction( '[Message Manifest] Submit Message Failure', props<{ manifest: MessageManifest, message: MessageManifestEntryMessage }>() )
submitMessageSuccess
Default value : createAction( '[Message Manifest] Submit Message Success', props<{ manifest: MessageManifest, message: MessageManifestEntryMessage }>() )
subscribeManifest
Default value : createAction( '[Message Manifest] Subscribe', props<{ manifest: MessageManifest, entry: MessageManifestEntry }>() )
subscribeManifestFailure
Default value : createAction( '[Message Manifest] Subscribe Failure', props<{ entry: MessageManifestEntry }>() )
subscribeManifestSuccess
Default value : createAction( '[Message Manifest] Subscribe Success', props<{ manifest: MessageManifest, entry: MessageManifestEntry, subscription: any }>() )
updateManifest
Default value : createAction('[Message Manifest] Update Manifest', props<{ update: Update<MessageManifest> }>())
updateManifests
Default value : createAction('[Message Manifest] Update Manifests', props<{ updates: Array<Update<MessageManifest>> }>())
upsertManifest
Default value : createAction('[Message Manifest] Upsert Manifest', props<{ manifest: MessageManifest }>())
unsubscribeManifest
Default value : createAction( '[Message Manifest] Unsubscribe', props<{ manifest: MessageManifest, entry: MessageManifestEntry }>() )
unsubscribeManifestFailure
Default value : createAction( '[Message Manifest] Unsubscribe Failure', props<{ entry: MessageManifestEntry }>() )
unsubscribeManifestSuccess
Default value : createAction( '[Message Manifest] Unsubscribe Success', props<{ manifest: MessageManifest, entry: MessageManifestEntry }>() )
upsertManifests
Default value : createAction('[Message Manifest] Upsert Manifests', props<{ manifests: Array<MessageManifest> }>())

projects/wvr-elements/src/lib/core/modal/modal.actions.ts

addModal
Default value : createAction('[Modal] Add Modal', props<{ modal: Modal }>())
closeModal
Default value : createAction('[Modal] Close Modal', props<{ id: string }>())
openModal
Default value : createAction('[Modal] Open Modal', props<{ id: string }>())

projects/wvr-elements/src/lib/core/wysiwyg/wysiwyg.actions.ts

addWysiwyg
Default value : createAction( '[Wysiwyg] Add', props<{ wysiwyg: Wysiwyg }>() )
resetWysiwyg
Default value : createAction( '[Wysiwyg] Reset', props<{ id: string }>() )
saveWysiwyg
Default value : createAction( '[Wysiwyg] Save', props<{ id: string, content: string }>() )

projects/wvr-elements/src/lib/shared/config/app-config.ts

APP_CONFIG
Default value : new InjectionToken<AppConfig>('APP_CONFIG')

An injection token for the AppConfig

projects/wvr-elements/src/lib/shared/utility/color.utility.ts

colorToHex
Default value : (rgb: string): string => { // tslint:disable-next-line: max-line-length const matches = rgb.match(/^(rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/); // tslint:disable-next-line:newline-per-chained-call const hex = x => (`0${parseInt(x, 10).toString(16)}`).slice(-2); return (hex(matches[1]) + hex(matches[2]) + hex(matches[3])).toUpperCase(); }
expandHexShorthand
Default value : (hex: string): string => { // expand shorthand form (e.g. "03f") to full form (e.g. "0033ff") const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; return hex.replace(shorthandRegex, (m, r: string, g: string, b: string) => r + r + g + g + b + b); }
hexToRgb
Default value : (hex: string): any => { const value = normalizeColor(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : undefined; }
luminance
Default value : (color: string, lum: number): string => { const l = lum || Number(0); // convert to decimal and change luminosity let rgb = '#'; let c: number; let i: number; let cs: string; for (i = 0; i < 3; i++) { c = parseInt(normalizeColor(color) .substr(i * 2, 2), 16); cs = Math.round(Math.min(Math.max(0, c + c * l), 255)) .toString(16); rgb += (`00${cs}`).substr(cs.length); } return rgb; }
mix
Default value : (baseColor: string, color: string, weight: number): string => { const d2h = (d): string => d.toString(16); // convert a decimal value to hex const h2d = (h): number => parseInt(h, 16); // convert a hex value to decimal const w = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted let resultColor = '#'; for (let i = 0; i <= 5; i += 2) { // loop through each of the 3 hex pairs—red, green, and blue const v1 = h2d(normalizeColor(baseColor) .substr(i, 2)); // extract the current pairs const v2 = h2d(normalizeColor(color) .substr(i, 2)); // combine the current pairs from each source color, according to the specified weight let val = d2h(Math.round(v2 + (v1 - v2) * (w / 100))); while (val.length < 2) { val = `0${val}`; } // prepend a '0' if val results in a single digit resultColor += val; // concatenate val to our new color string } return resultColor; }
normalizeColor
Default value : (color: string): string => { let value = color.trim(); if (value.charAt(0) !== '#') { value = value.indexOf('rgb') !== 0 ? nameToHex[color] : colorToHex(color); } else { if (value.length === 4) { value = expandHexShorthand(color); } } return !!value ? value.replace(/#/g, '') : 'ffffff'; }
yiq
Default value : (color: string): number => { const rgb = hexToRgb(color); return Math.round((rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000); }

projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts

componentScript
Default value : document.currentScript
lazyLoadWeaverElement
Default value : (element: HTMLElement, selectors: Array<string>): boolean => { if (selectors.indexOf(element.parentNode.nodeName) >= 0) { return false; } if (element.parentNode.nodeName === 'BODY') { return true; } return lazyLoadWeaverElement(element.parentNode as HTMLElement, selectors); }
obtainConfigPath
Default value : (): string => { const componentScriptSrc = componentScript.getAttribute('src'); const componentScriptSrcPathParts = componentScriptSrc.split('/'); componentScriptSrcPathParts.pop(); const configBasePath = componentScriptSrcPathParts.join('/'); return `${configBasePath}/config.json`; }

Interigates the current script tag for its src and extroplates the configuration path from that location.
registerWeaverElements
Default value : (injector: Injector, wvrElements: Array<WvrElementDesc>) => { // filter for selectors of elements to lazy load const selectors = wvrElements.filter(wvrElement => wvrElement.lazy) .map(wvrElement => wvrElement.selector.toUpperCase()); // wrap elements that do not have weaver element as parent in div and template // div to specify class to target for min-height // template to prevent render of weaver element wvrElements .filter(wvrElement => wvrElement.lazy) .forEach(wvrElement => { Array.from(document.getElementsByTagName(wvrElement.selector)) .forEach(element => { if (lazyLoadWeaverElement(element as HTMLElement, selectors)) { const div = document.createElement('div'); div.setAttribute('element', wvrElement.selector); const template = document.createElement('template'); div.appendChild(template); element.insertAdjacentElement('beforebegin', div); template.content.appendChild(element); } }); }); // define the weaver elements in custom browser element registry wvrElements.forEach(wvrElement => { try { customElements.define(wvrElement.selector, createCustomElement(wvrElement.component, { injector })); } catch (e) { // console.warn(e); } }); // create observer to detect when wrapped element enters view port const observer = new IntersectionObserver(entries => { entries.map(entry => { // when wrapped element enters view port, unwrap it and remove from observer if (entry.isIntersecting) { observer.unobserve(entry.target); const child = (entry.target.childNodes[0] as HTMLTemplateElement).content.childNodes[0]; entry.target.insertAdjacentElement('beforebegin', child as Element); entry.target.parentNode.removeChild(entry.target); } }); }, { rootMargin: '0px 0px 5px 0px' }); wvrTimeout(() => { // add all wrapped weaver elements to observer Array.from(document.querySelectorAll('div[element]')) .forEach(element => { observer.observe(element); }); }); }

Lazy load weaver elements.
showWeaverElements
Default value : () => { document.querySelectorAll('.wvr-components-loading:not(body)') .forEach(element => { element.classList.remove('wvr-components-loading'); }); document.querySelectorAll('[wvr-hide-content]') .forEach(elem => { elem.removeAttribute('wvr-hide-content'); }); const body = document.querySelector('body'); if (body) { body.classList.remove('wvr-components-loading'); body.classList.remove('wvr-hidden'); } }

Show weaver elements.
weaverBootstrap
Default value : (module: Type<unknown>) => (configPath: string) => fetch(configPath ? configPath : obtainConfigPath()) .then((response: Response) => response.json()) .then((appConfig: AppConfig) => platformBrowserDynamic([{ provide: APP_CONFIG, useValue: appConfig }]) .bootstrapModule(module) .then(showWeaverElements) .catch((err: any) => { console.error(err); }))

Obtains, parses and injects the configuration.
weaverInit
Default value : (module: Type<unknown>, environment: any) => { if (environment.production) { enableProdMode(); } const win = (window as any); if (!win.weaverBootstrapEvent) { win.weaverBootstrapEvent = 'DOMContentLoaded'; } document.addEventListener(win.weaverBootstrapEvent, () => { weaverBootstrap(module)(isDevMode() ? '/config.json' : undefined) .catch(); }); }

projects/wvr-elements/src/lib/core/theme/theme.reducers.ts

defaultDarkTheme
Type : ThemeVariants
Default value : DefaultDarkTheme
defaultTheme
Type : ThemeVariants
Default value : DefaultTheme
initialState
Type : State
Default value : { themes: { default: unwrap(defaultTheme), defaultDark: unwrap(defaultDarkTheme) }, currentTheme: 'default' }
reducer
Default value : createReducer( initialState, on(ThemeActions.add, (state, { name, theme }) => { const themes = { ...state.themes }; themes[name] = { ...themes[name], ...theme }; return { ...state, themes }; }), on(ThemeActions.select, (state, { name }) => ({ ...state, currentTheme: name })) )
unwrap
Default value : (theme: any): ThemeVariants => theme.default

projects/wvr-elements/src/lib/core/rest/rest.actions.ts

deleteRequest
Default value : createAction( '[REST] Delete', props<{ request: Request, success: success, failure: failure }>() )
getRequest
Default value : createAction( '[REST] Get', props<{ request: Request, success: success, failure: failure }>() )
logResponse
Default value : createAction( '[REST] Log', props<{ response: any }>() )
optionsRequest
Default value : createAction( '[REST] Options', props<{ request: Request, success: success, failure: failure }>() )
patchRequest
Default value : createAction( '[REST] Patch', props<{ request: Request, success: success, failure: failure }>() )
postRequest
Default value : createAction( '[REST] Post', props<{ request: Request, success: success, failure: failure }>() )
putRequest
Default value : createAction( '[REST] Put', props<{ request: Request, success: success, failure: failure }>() )
request
Default value : createAction( '[REST] Request', props<{ request: Request, method: method, success: success, failure: failure }>() )
requestFailure
Default value : createAction( '[REST] Request Failure', props<{ response: HttpErrorResponse, failure: failure retry: Action }>() )
requestSuccess
Default value : createAction( '[REST] Request Success', props<{ response: any, success: success }>() )
storeRequest
Default value : createAction( '[REST] Store Request', props<{ request: Request }>() )

projects/wvr-elements/src/lib/core/effects.ts

effects
Type : object
Default value : { Manifest, MessageManifest, Modal, Rest, Theme, Wysiwyg }

projects/wvr-elements/src/lib/core/store.ts

findManifestEntry
Default value : (manifest: Manifest, entryName: string): ManifestEntry => manifest.entries.find(e => e.name === entryName)
findMessageManifestEntry
Default value : (manifest: MessageManifest, entryName: string): MessageManifestEntry => manifest.entries.find(e => e.name === entryName)
initialState
Type : RootState
Default value : { layout: fromLayout.initialState, manifests: fromManifest.initialState, messageManifests: fromMessageManifest.initialState, modals: fromModal.initialState, rest: fromRest.initialState, theme: fromTheme.initialState, wysiwyg: fromWysiwyg.initialState }
metaReducers
Type : Array<MetaReducer<RootState>>
Default value : []
reducers
Type : ActionReducerMap<RootState>
Default value : { layout: fromLayout.reducer, manifests: fromManifest.reducer, messageManifests: fromMessageManifest.reducer, modals: fromModal.reducer, rest: fromRest.reducer, theme: fromTheme.reducer, wysiwyg: fromWysiwyg.reducer }
ROOT_REDUCER
Default value : new InjectionToken<ActionReducerMap<RootState>>('Root Reducer', { factory: () => (reducers) })
selectAllManifests
Default value : createSelector( selectManifestState, fromManifest.selectAllManifests )
selectAllMessageManifests
Default value : createSelector( selectMessageManifestState, fromMessageManifest.selectAllManifests )
selectCurrentMessageMessage
Default value : createSelector( selectMessageManifestState, fromMessageManifest.selectCurrentMessage )
selectCurrentRequest
Default value : createSelector( selectManifestState, fromManifest.selectCurrentRequest )
selectCurrentTheme
Default value : createSelector( selectThemeState, (themeState: fromTheme.State) => themeState.themes[themeState.currentTheme] )
selectIsMobileLayout
Default value : createSelector( selectLayoutState, (layoutState: fromLayout.State) => layoutState?.layout.isMobile )
selectLayoutState
Default value : createFeatureSelector<RootState, fromLayout.State>('layout')
selectManifestByName
Default value : (manifestName: string) => createSelector( selectManifestEntities, manifestEntities => manifestEntities[manifestName] )
selectManifestEntities
Default value : createSelector( selectManifestState, fromManifest.selectManifestEntities )
selectManifestEntryError
Default value : (manifestName: string, entryName: string) => createSelector( selectManifestEntities, manifestEntities => { if (manifestEntities[manifestName]) { const manifestEntry = findManifestEntry(manifestEntities[manifestName], entryName); return manifestEntry ? manifestEntry.error : undefined; } return undefined; } )
selectManifestEntryResponse
Default value : (manifestName: string, entryName: string) => createSelector( selectManifestEntities, manifestEntities => { if (manifestEntities[manifestName]) { const manifestEntry = findManifestEntry(manifestEntities[manifestName], entryName); return manifestEntry ? manifestEntry.response : undefined; } return undefined; } )
selectManifestNames
Default value : createSelector( selectManifestState, fromManifest.selectManifestNames )
selectManifestState
Default value : createFeatureSelector<RootState, fromManifest.State>('manifests')
selectManifestTotal
Default value : createSelector( selectManifestState, fromManifest.selectManifestTotal )
selectMessageManifestByName
Default value : (manifestName: string) => createSelector( selectMessageManifestEntities, messageManifestEntities => messageManifestEntities[manifestName] )
selectMessageManifestEntities
Default value : createSelector( selectMessageManifestState, fromMessageManifest.selectManifestEntities )
selectMessageManifestNames
Default value : createSelector( selectMessageManifestState, fromMessageManifest.selectManifestNames )
selectMessageManifestState
Default value : createFeatureSelector<RootState, fromMessageManifest.MessageManifestState>('messageManifests')
selectMessageManifestTotal
Default value : createSelector( selectMessageManifestState, fromMessageManifest.selectManifestTotal )
selectModalByName
Default value : (modalName: string) => createSelector( selectModalState, (modalState: fromModal.State) => modalState.entities[modalName] )
selectModalState
Default value : createFeatureSelector<RootState, fromModal.State>('modals')
selectPendingMessageMessages
Default value : createSelector( selectMessageManifestState, fromMessageManifest.selectPendingMessage )
selectPendingRequests
Default value : createSelector( selectManifestState, fromManifest.selectPendingRequests )
selectRestRequest
Default value : createSelector( selectRestState, fromRest.selectRequest )
selectRestState
Default value : createFeatureSelector<RootState, fromRest.State>('rest')
selectTheme
Default value : (name: string) => createSelector( selectThemeState, (themeState: fromTheme.State) => themeState.themes[name] )
selectThemeState
Default value : createFeatureSelector<RootState, fromTheme.State>('theme')
selectWysiwygById
Default value : (id: string) => createSelector( selectWysiwygState, (wysiwygState: fromWysiwyg.State) => wysiwygState?.entities[id] )
selectWysiwygState
Default value : createFeatureSelector<RootState, fromWysiwyg.State>('wysiwyg')

projects/wvr-elements/src/lib/core/handlebars-helpers.ts

handlebarHelpersInitialized
Default value : false
initializeHandlebarHelpers
Default value : (initialContext: any = {}) => { if (!handlebarHelpersInitialized) { Handlebars.registerHelper('json', context => JSON.stringify(context, undefined, 2)); handlebarHelpersInitialized = true; } }

projects/wvr-elements/src/lib/core/layout/layout.reducers.ts

initialState
Type : State
Default value : { layout: { isMobile: false } }
reducer
Default value : createReducer( initialState, on(LayoutActions.setIsMobile, (state, { isMobile }) => ({ ...state, layout: { ...state.layout, isMobile } })) )

projects/wvr-elements/src/lib/core/rest/rest.reducers.ts

initialState
Type : State
Default value : { request: undefined, response: undefined }
reducer
Default value : createReducer( initialState, on(RestActions.request, (state, { request }) => ({ ...state, request, response: undefined, error: undefined })), on(RestActions.requestSuccess, (state, { response }) => ({ ...state, response })), on(RestActions.requestFailure, (state, { response }) => ({ ...state, response })) )
selectRequest
Default value : (state: State) => state.request
selectResponse
Default value : (state: State) => state.response

projects/wvr-elements/src/lib/wvr-manifest/mapping-strategies.ts

jsonparse
Type : MappingStrategy
Default value : { map: data => JSON.parse(data) }
none
Type : MappingStrategy
Default value : { map: data => data }
weaver
Type : MappingStrategy
Default value : { map: data => data.payload[Object.keys(data.payload)[0]] }

projects/wvr-elements/src/lib/core/wvr-core.module.ts

MODULES
Type : Array<any>
Default value : [ EffectsModule.forRoot([ LayoutEffects, ManifestEffects, MessageManifestEffects, RestEffects, ThemeEffects, WysiwygEffects ]), HttpClientModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers }), ...storeDevtoolsInstrument ]
PROVIDERS
Type : []
Default value : [ AnimationService, ActionRegistryService, ComponentRegistryService, NgBindingsService, ThemeService ]
registerCustomElements
Default value : (injector: Injector, elements: Array<{ component: any, selector: string }>) => { elements.forEach(element => { try { customElements.define(element.selector, createCustomElement(element.component, { injector })); } catch (e) { // console.warn(e); } }); }
showHiddentContent
Default value : (injector: Injector) => { const doc = injector.get(DOCUMENT); doc.querySelectorAll('[wvr-hide-content]') .forEach(elem => { elem.removeAttribute('wvr-hide-content'); }); }
WVR_ELEMENTS
Type : Array<WvrElementDesc>
Default value : [ { component: WvrAlertComponent, selector: 'wvre-alert', lazy: true }, { component: WvrButtonComponent, selector: 'wvre-button', lazy: true }, { component: WvrCardComponent, selector: 'wvre-card', lazy: true }, { component: WvrColorPreviewComponent, selector: 'wvre-color-preview', lazy: true }, { component: WvrDropdownComponent, selector: 'wvre-dropdown', lazy: true }, { component: WvrFooterComponent, selector: 'wvre-footer', lazy: true }, { component: WvrHeaderComponent, selector: 'wvre-header', lazy: false }, { component: WvrIconComponent, selector: 'wvre-icon', lazy: true }, { component: WvrItWorksComponent, selector: 'wvre-it-works', lazy: true }, { component: WvrListComponent, selector: 'wvre-list', lazy: true }, { component: WvrListItemComponent, selector: 'wvre-list-item', lazy: true }, { component: WvrManifestComponent, selector: 'wvre-manifest', lazy: false }, { component: WvrManifestEntryComponent, selector: 'wvre-manifest-entry', lazy: false }, { component: WvrMessageManifestComponent, selector: 'wvre-message-manifest', lazy: false }, { component: WvrMessageManifestEntryComponent, selector: 'wvre-message-manifest-entry', lazy: false }, { component: WvrModalComponent, selector: 'wvre-modal', lazy: true }, { component: WvrNavLiComponent, selector: 'wvre-nav-li', lazy: true }, { component: WvrNavListComponent, selector: 'wvre-nav-list', lazy: true }, { component: WvrTabsComponent, selector: 'wvre-tabs', lazy: true }, { component: WvrTextComponent, selector: 'wvre-text', lazy: true }, { component: WvrThemeComponent, selector: 'wvre-theme', lazy: false }, { component: WvrWysiwygComponent, selector: 'wvre-wysiwyg', lazy: true } ]

This property contains a list of components and the selector tags.

projects/wvr-elements/src/lib/shared/wvr-shared.module.ts

MODULES
Type : []
Default value : [ CommonModule, EditorModule, FormsModule, NgbDropdownModule, NgbModalModule, ReactiveFormsModule ]
WVR_COMPONENTS
Type : []
Default value : [ WvrAlertComponent, WvrButtonComponent, WvrCardComponent, WvrColorPreviewComponent, WvrContentProjectionDirective, WvrDropdownComponent, WvrFooterComponent, WvrHeaderComponent, WvrIconComponent, WvrItWorksComponent, WvrListComponent, WvrListItemComponent, WvrManifestComponent, WvrManifestEntryComponent, WvrMessageManifestComponent, WvrMessageManifestEntryComponent, WvrModalComponent, WvrNavLiComponent, WvrNavListComponent, WvrTabsComponent, WvrTextComponent, WvrThemeComponent, WvrWysiwygComponent ]

This property contains a list of components classes.
WVR_PIPES
Type : []
Default value : [ SafePipe, DefaultPipe ]

projects/wvr-elements/src/lib/shared/utility/projection.utility.ts

preserveContent
Default value : (elementRef: ElementRef, templateSelector: string, targetSelector: string): void => { const element: Element = elementRef.nativeElement.querySelector(targetSelector); const template: HTMLTemplateElement = elementRef.nativeElement.querySelector(templateSelector); if (!!element && !!template) { Array.from(element.children) .filter((elem: Element) => elem.nodeName !== 'TEMPLATE') .forEach((elem: Element) => { template.appendChild(elem); }); } }
project
Default value : (element: Element, sourceElementRef: ElementRef, templateSelector: string): void => { const templates: Array<HTMLTemplateElement> = Array.from(sourceElementRef.nativeElement.querySelectorAll(templateSelector)); if (!!element) { if (templates.length) { templates.forEach((template: HTMLTemplateElement) => { const clone: Node = template.children.length === 0 && template.content.children.length > 0 ? template.content.cloneNode(true) : template; Array.from((clone as Node).childNodes) .forEach((child: Node) => { element.appendChild(child); }); }); } else { // hide target element if nothing to project (element as HTMLElement).hidden = true; } } }
projectContent
Default value : (elementRef: ElementRef, templateSelector: string, targetSelector: string): void => { const element: Element = elementRef.nativeElement.querySelector(targetSelector); project(element, elementRef, templateSelector); }
projectSourceContent
Default value : (elementRef: ElementRef, sourceElementRef: ElementRef, templateSelector: string): void => { const element: Element = elementRef.nativeElement; project(element, sourceElementRef, templateSelector); }

projects/wvr-elements/src/lib/core/layout/layout.actions.ts

setIsMobile
Default value : createAction( '[Layout] Set Mobile', props<{ isMobile: boolean }>() )

projects/wvr-elements/src/lib/core/devtools/instrument.prod.ts

storeDevtoolsInstrument
Type : []
Default value : []

projects/wvr-elements/src/lib/core/devtools/instrument.ts

storeDevtoolsInstrument
Type : []
Default value : [ StoreDevtoolsModule.instrument() ]

projects/wvr-elements/src/lib/shared/config/test-app-config.ts

testAppConfig
Type : AppConfig
Default value : { theme: 'default', baseUrl: 'http://localhost:4200', assetsUrl: 'http://localhost:4200/assets' }

An application configuration to be used in testing.

projects/wvr-elements/src/lib/shared/animation/wvr-animation-defaults.ts

wvrAnimationDefaults
Type : object
Default value : { fade: { from: 1, to: 0, timing: '250ms linear' }, fadeToggle: { from: 1, to: 0, timing: '250ms linear' }, rotate: { from: 0, to: 90, timing: '250ms linear' }, rotateToggle: { from: 0, to: 90, timing: '250ms linear' }, expandCollapse: { from: '*', to: '0px', timing: '250ms linear' }, expandCollapseToggle: { from: '*', to: '0px', timing: '250ms linear' } }

Default settings for each predefined animation.

projects/wvr-elements/src/lib/shared/animation/wvr-animations.ts

wvrAnimationInitialization
Type : object
Default value : { fade: (s: Map<string, any>, from: string, elem: HTMLElement): void => { elem.style.opacity = from; }, fadeToggle: (s: Map<string, any>, from: string, elem: HTMLElement): void => { elem.style.opacity = from; }, rotate: (s: Map<string, any>, from: string, elem: HTMLElement): void => { elem.style.transform = `rotate(${from}deg)`; }, rotateToggle: (s: Map<string, any>, from: string, elem: HTMLElement): void => { elem.style.transform = `rotate(${from}deg)`; }, expandCollapse: (s: Map<string, any>, from: string, elem: HTMLElement): void => { s.set('expandCollapseFrom', from ? from : elem.clientHeight); if (from) { elem.style.height = from; } }, expandCollapseToggle: (s: Map<string, any>, from: string, elem: HTMLElement): void => { s.set('expandCollapseFrom', from ? from : elem.clientHeight); if (from) { elem.style.height = from; } } }

Defines an initialization method for each predefined animaiton.
wvrAnimations
Type : object
Default value : { fade: (s: Map<string, any>, elem: HTMLElement): AnimationMetadata | Array<AnimationMetadata> => { const a = [ animate('{{timing}}', style({ opacity: '{{to}}' })) ]; s.set('fadetoggle', true); return a; }, fadeToggle: (s: Map<string, any>, elem: HTMLElement): AnimationMetadata | Array<AnimationMetadata> => { const a = [ animate('{{timing}}', style({ opacity: s.get('fadetoggle') ? '{{from}}' : '{{to}}'})) ]; s.set('fadetoggle', !s.get('fadetoggle')); return a; }, rotate: (s: Map<string, any>, elem: HTMLElement): AnimationMetadata | Array<AnimationMetadata> => { const a = [ animate('{{timing}}', style({ transform: 'rotate({{to}}deg)' })) ]; s.set('rotateToggle', true); return a; }, rotateToggle: (s: Map<string, any>, elem: HTMLElement): AnimationMetadata | Array<AnimationMetadata> => { const a = [ animate('{{timing}}', style({ transform: s.get('rotateToggle') ? 'rotate({{from}}deg)' : 'rotate({{to}}deg)' })) ]; s.set('rotateToggle', !s.get('rotateToggle')); return a; }, expandCollapse: (s: Map<string, any>, elem: HTMLElement): AnimationMetadata | Array<AnimationMetadata> => { const a = [ animate('{{timing}}', style({ height: '{{to}}' })) ]; s.set('expandCollapseToggle', true); return a; }, expandCollapseToggle: (s: Map<string, any>, elem: HTMLElement): AnimationMetadata | Array<AnimationMetadata> => { const a = [ animate('{{timing}}', style({ height: s.get('expandCollapseToggle') ? s.get('expandCollapseFrom') : '{{to}}'})) ]; s.set('expandCollapseToggle', !s.get('expandCollapseToggle')); return a; } }

Describes the AnimationAnimateMetadata to be used for each predefined animation.

projects/wvr-elements/src/lib/shared/utility/template.utility.ts

wvrCompile
Default value : (d: {}, s: WvrDataSelect, elem: HTMLElement, projectedContentElem: HTMLElement): void => { const data = {}; data[s.as] = d; const compiledContent = Handlebars.compile(projectedContentElem.innerHTML)(data); projectedContentElem.outerHTML = compiledContent; }
wvrParseProjectedContent
Default value : (component: WvrDataComponent, elem: HTMLElement, subscriptions: Array<Subscription>): void => { if (!component.hasWvrData()) { return; } wvrTimeout(() => { const projectedContentElem = elem.querySelector('template[wvr-compile]'); if (!projectedContentElem) { return; } const valueParsed = JSON5.parse(component.getWvrData()); const wvrDataSelects: Array<any> = Array.isArray(valueParsed) ? valueParsed : [valueParsed]; wvrDataSelects .filter((s: WvrDataSelect) => !!s.manifest && !!s.entry && !!s.as) .forEach((s: WvrDataSelect) => { subscriptions.push( component.data[s.as].subscribe(d => { wvrCompile(d, s, elem, projectedContentElem as HTMLElement); }) ); }); }); }

projects/wvr-elements/src/lib/shared/utility/timing.utility.ts

wvrTimeout
Default value : (cb: Function, delay = 1): Function => { let elapsedTime = 0; const raf = requestAnimationFrame(deltaTime => { elapsedTime += deltaTime; if (elapsedTime > delay) { cancelAnimationFrame(raf); cb(); } }); return () => { cancelAnimationFrame(raf); }; }

results matching ""

    No results matching ""