The service class that is not singleton must provide a ctor.
Definition of all routes. Determines the behavior of the router.
Fundamental ctor interface. Used internally to create types in the model classes. Helpful for other purposes, like creating real objects at runtime from generic parameters.
The example scenario below allows the definition of a type, derived from an abstract base class, but still can be called with new
:
This component allows to create an outlet, that has no vivible DOM node. A comment node is being replaced by the actual node delivered from router. That's an option onw might need in case of weak CSS that changes its behavior if a DIV element or other regular HTML element appears.
In the render method add the element as a regular component.
This component fires an event, mutation
, that indicates the content has been changed by the router infrastructure.
<n-outlet></n-outlet>
As with any other outlet you can add a name by using the name parameter. That is an observed attribute.
<n-outlet name="target"></n-outlet>
node is a CDATASection node.
node is a Comment node.
node is a DocumentFragment node.
node is a document.
Set when other is a descendant of node.
Set when other is an ancestor of node.
Set when node and other are not in the same tree.
Set when other is following node.
Set when other is preceding node.
node is a doctype.
node is an element.
node is a ProcessingInstruction node.
node is a Text node.
Returns node's node document's document base URL.
Returns the children.
Returns the child elements.
Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object.
Returns the value of element's class content attribute. Can be set to change it.
Returns the first child.
Returns the first child that is an element, and null otherwise.
Returns the value of element's id content attribute. Can be set to change it.
Returns true if node is connected and false otherwise.
Returns the last child.
Returns the last child that is an element, and null otherwise.
Returns the local name.
Returns the namespace.
Returns the first following sibling that is an element, and null otherwise.
Returns the next sibling.
Returns a string appropriate for the type of node.
Returns the type of node.
Fires when the user aborts the download.
Fires when the object loses the input focus.
Occurs when playback is possible, but would require further buffering.
Fires when the contents of the object or selection have changed.
Fires when the user clicks the left mouse button on the object
Fires when the user clicks the right mouse button in the client area, opening the context menu.
Fires when the user double-clicks the object.
Fires on the source object continuously during a drag operation.
Fires on the source object when the user releases the mouse at the close of a drag operation.
Fires on the target element when the user drags the object to a valid drop target.
Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
Fires on the target element continuously while the user drags the object over a valid drop target.
Fires on the source object when the user starts to drag a text selection or selected object.
Occurs when the duration attribute is updated.
Occurs when the media element is reset to its initial state.
Occurs when the end of playback is reached.
Fires when an error occurs during object loading.
Fires when the object receives focus.
Fires when the user presses a key.
Fires when the user presses an alphanumeric key.
Fires when the user releases a key.
Fires immediately after the browser loads the object.
Occurs when media data is loaded at the current playback position.
Occurs when the duration and dimensions of the media have been determined.
Occurs when Internet Explorer begins looking for media data.
Fires when the user clicks the object with either mouse button.
Fires when the user moves the mouse over the object.
Fires when the user moves the mouse pointer outside the boundaries of the object.
Fires when the user moves the mouse pointer into the object.
Fires when the user releases a mouse button while the mouse is over the object.
Occurs when playback is paused.
Occurs when the play method is requested.
Occurs when the audio or video has started playing.
Occurs to indicate progress while downloading media data.
Occurs when the playback rate is increased or decreased.
Fires when the user resets a form.
Fires when the user repositions the scroll box in the scroll bar on the object.
Occurs when the seek operation ends.
Occurs when the current playback position is moved.
Fires when the current selection changes.
Occurs when the download has stopped.
Occurs if the load operation has been intentionally halted.
Occurs to indicate the current playback position.
Occurs when the volume is changed, or playback is muted or unmuted.
Occurs when playback stops because the next frame of a video resource is not available.
Returns the parent element.
Returns the parent.
Returns the namespace prefix.
Returns the first preceding sibling that is an element, and null otherwise.
Returns the previous sibling.
Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise.
Returns the value of element's slot content attribute. Can be set to change it.
Returns the HTML-uppercased qualified name.
Set by decorator {@link {CustomElement}}. It's the element's name in CSS selector style.
Set by decorator {@link {UseShadowDOM}}. A shadowed component is technically isolated.
Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.
Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.
Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
Creates a shadow root for element and returns it.
Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes.
Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
Returns a copy of node. If deep is true, the copy also includes the node's descendants.
Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise.
Returns a bitmask indicating the position of other relative to node.
Returns true if other is an inclusive descendant of node, and false otherwise.
Call this method to dispatch a custom event. Returns the result of the event handler conform to default ECMAScript events.
Dispatch a custom event bound to the current component.
Some custom data and settings.
Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
Clean up any resources here.
Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise.
Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise.
Returns the qualified names of all element's attributes. Can contain duplicates.
Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.
Returns node's root.
Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise.
Returns true if element has an attribute whose namespace is namespace and local name is localName.
Returns true if element has attributes, and false otherwise.
Returns whether node has children.
Returns whether node and otherNode have the same properties.
Returns true if matching selectors against element's root yields element, and false otherwise.
Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.
Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.
Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
Returns the first element that is a descendant of node that matches selectors.
Returns all element descendants of node that match selectors.
Returns the attributes value. If it doesn't exists it can return the given default. The attribute does not change, though.
Removes node.
Removes element's first attribute whose qualified name is qualifiedName.
Removes element's attribute whose namespace is namespace and local name is localName.
Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes.
Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
Displays element fullscreen and resolves promise when done.
When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference.
Returns the service's instance. Defined using the InjectService decorator. The decorator uses a local name for the custom service.
Sets the value of element's first attribute whose qualified name is qualifiedName to value.
Sets the value of element's attribute whose namespace is namespace and local name is localName to value.
Change the state of the internal data object. If necessary, the component re-renders. Render can be suppressed.
Omit the @param noRender at it renders on change. Set to true
to suppress entirely. Set to false
to enforce explicitly.
Name of the property. Must be defined in the generic P to assure being observed.
The actual new value.
Prevent or enforce the re-rendering. Used if multiple attributes are being written and a render process for each is not required.
If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName.
Returns true if qualifiedName is now present, and false otherwise.
Return the last state the life cycle has reached. This is being set immediately before the event {@link {lifeCycle}} is fired.
Get the assigned state data the component holds internally.
Promote the lifecycle changes:
Observe all registered attributes. The source field is set by the {@link {Properties}} decorator.
The events supported in components.
The BindName decorator is required in Binders to preserve the bindername. This makes using types in forms working even after minification. Alternatively one can consider using string names.
The compare decorator compares two field's values and shows an error message on the decorated field. The other field (compared to) does not has a decorator nor receives a message.
This decorator is for validation of fields using a custom algorithm. The default message is 'The field {keyName} is invalid'.
A callback that has access to the entire object through this
and must return a boolean
The error message shown in case of error. A default value is being provided if omitted.
The decorator that makes a class a Web Component. This decorstor is required on all components.
Name of component in HTML.
The Directive decorator defines a selector, for which a directive class can be assigned. To create a directive, write class and decorate it with this decorator. Then, register the class with the GlobalProvider. If the element that matches the selector appears in a component and run time, the class gets instantiated and receives a reference to the hosting component. In the class one can add any kind of non UI activity, including handling of events on the host component and manipulating the host. A good example is the ability to add drag-n-drop functionality to any sort of component through a directive.
The Display decorator.
This decorator can be used on fields. It's being used to create label in forms and headers in the grid. Additional parameters are provided to refine forms further.
The Name or Label that appears in forms or as header in grids.
If one uses AcAutoForm to create a whole form from a model, this controls the element's order.
A tooltip that can be used optionally.
The DisplayGroup decorator. Groups fields in auto forms. Just define a name (that appears as the group's name) and put the very same name on all members of the group.
The Name or Label that appears in forms as the groups legend.
If one uses AcAutoForm to create a whole form from a model, this controls the groups order.
A tooltip that can be used optionally.
The Dispose decorator.
Assign to a property with an instruction what to do on dispose and the dispose function will call this implicitly.
Allows an event driven mechanism to dispatch actions. The decorator takes an array of effect definitions, that add events to elements and forward properties to actions. That way one cna define a whole range of actions outside of the view code and simplify the appearance of compnents.
Validates a field against an email pattern. Based on "pattern", so in form one must use hasError('pattern') to get validation results.
The Events decorator.
Allows a component to dispatch custom events. The argument is an array, so add any number of event names here.
@CustomElement('app-button')
@Properties<ButtonPropType>({ text: ''})
@Events(['custom'])
export class ButtonComponent extends BaseComponent<ButtonPropType> {
constructor() {
super();
}
clickMe(e) {
const checkEvent: CustomEventInit = {
bubbles: true,
cancelable: false,
};
super.dispatch('custom', checkEvent);
}
render() {
return (
<>
<button type="button" n-on-click={e => this.clickMe(e)}>
{super.data.text}
</button>
</>
);
}
}
Name the Expander by using this decorator.
The HTMLElement derived type to expand. This is optional.
value of expandable property
The Extends decorator. Experimental.
If decorated, the component will register itself as an extension of the given element. If omitted, {@link {HTMLElement}} is being used. Usage:
@extends('a')
That extends an {@link @{HTMLAnchorElement}} and hence inherits all given properties and behaviors.
The tag name of the element that now forms the base element.
The Filterable decorator.
A decorated property shall produce a filter in table views.
Optional, default is true.
The Hidden decorator.
Fields in forms that render automatically using the an auto component will render as . In table views this decorator shall prevent the column at all.
Optional, default is true.
Gives a component access to an injectable service. That is, any sort of class's instances.
Use the access within the component the services
property provides.
local name (within component) of service
Type of service class. Any type that can make an instance will do (function
, class
) if you instantiate the service implicitly.
If you use a singleton, the type {@link ServiceType
If set to @true the type must be an instance, that will be re-used accross calls, if @false or omitted an instance will be created using new operator.
The maxlength decorator assures that a string field contains not more than a number of characters.
The minlength decorator assures that a string field contains at least a number of characters.
The decorator assures that a string field fullfilles a regular expression pattern.
The Placeholder decorator.
The placeholder adds the given text as a watermark to any input fields. There is no function in DataGrid.
The Name that appears in form fields as a watermark.
The Properties decorator.
Properties decorated with this are now observed attributes.
Create the actual store in the component. Use together with IStore interface to have typed access.
A typical usage scenario is shown below:
@CustomElement('page-officematerial')
@ProvideStore<globalStoreType>(store)
export class OfficematerialPageComponent extends BaseComponent<{}> implements IStore<globalStoreType> {
public store: Store<globalStoreType>;
private tabSubscriber;
constructor() {
super();
this.tabSubscriber = this.store.subscribe('officeTab', (data: globalStoreType) => {
this.querySelector<TabsComponent>('#officeTabs')?.setTab(data.officeTab);
});
}
dispose() {
if (this.tabSubscriber) {
this.tabSubscriber.remove();
}
}
// parts omitted for brevity
}
The IStore interface enforces the store
field. The decorator actually fills it with an instance. It's safe to use immediately
in the constructor. Please also note the dispose
function that is called by the backend once the component dies. It's necessary to
inform the subscriber to free the handler.
The type of the store
Validates a field against an range. Applies to numerical values or dates.
The range's values are included in the valid range.
The minimum value (included) as number or Date
The maximum value (included) as number or Date
A custom message. If not provided "The field [field] does not fall into the range from [from] to [to]" will be generated, while [field] is the propertie's name.
The Readonly decorator. The field is readonly in the form. It just renders grayed out and handles the internals using default HTML5 techniques.
Optional, default is true.
This decorator is for validation of mandatory fields. The default message is 'The field {keyName} is required'.
The error message shown in case of error. A default value is being provided if omitted.
Select an element and assign to property.
Any selector used by querySelector
.
If set to true, the result is always a list with @link QueryList, regardless the number of elements
The ShadowDOM decorator.
If decorated, the component uses or not uses shadow DOM according the parameter.
set to true
The Sortable decorator.
Decorated properties shall produce a sort icon in table views.
Optional, default is true.
The Template decorator.
One can define the way a property gets rendered. The usage it's not specific, it's a suggestion.
The Name that appears in form fields as a watermark.
Depending of template some additional values as a dictionary.
The Translate decorator.
A decorated parameter can access i18n settings to create translated text.
Translation data as dictionary.
Allows an event driven mechanism to dispatch actions. The decorator takes an array of effect definitions, that add events to elements and forward properties to actions. That way one cna define a whole range of actions outside of the view code and simplify the appearance of compnents.
The UseParentStyles decorator.
Applies external styles to an element. This works with shadowed elements, even if there is no penetrating pseudo selector.
if emopty the element copies all parent styles in the document. If filled with styles, only these are applied to the component.
The ViewModel decorator. Defines the model
value in the component. Goes together with the IModel interface.
This decorator defines the model for a component. It's a class decorator.
For more information see IViewDecoratorOptions
The model used to bind the component. It's one model per component.
An optional set of handlers that handle custom data types while transferring values from elements to model and vice versa. Also option constructor support.
Provides the ability to move all binding instructions to one decorator. This is syntactic sugar only and shall move a hard to maintain number of binding instruction to one central location.
This decorator must be added after the ViewModel decorator.
A binder for any attribute, does not require a filleds n-bind
. Instead, add an empty 'n-bind' to trigger the other attributes quickly.,
<a href={bind
A view model type
A lambda selector for the viewmodel property
Define a data source
The view model type
Select expression as array of objects
A simple matchAll polyfill, could be removed if matchAll
is available nativ.
The string to investigate
The regular expression to process
Returns an iterable object with all matches
Select a property from the data defined by from
The view model type
Select expressionl like c => c.name
Type safe binder to bind a viewmodel property to an element property. Apply to the n-bind
attribute.
Needs a generic for the viewmodel and optional a generic for the type of element the target comes from.
A view model type
A lambda selector for the viewmodel property
The property to bind to. Change the second generic to allow more properties.
A decorator key that provides the property, use something like 'innerText' for example.
Additional options
A simple uuid function. Here just to avoid linking to another external library.
The support method for the render method of components. Just import, but never call directly. The TypeScript compiler uses this function.
It's a default export, so this import will work:
import JSX from '@nyaf/lib';
Usually it'S combined with the import of the base class:
import JSX, { BaseComppnent } from '@nyaf/lib';
Also, don't forget to setup tsconfig.json properly to support jsx and use the namespace JSX (in uppercase letters).
Generated using TypeDoc
A helper type to allows
Symbol()
as a identifier for actions.