starlightViewModes.switchTofunction h(){const t=window.location.hash;document.querySelectorAll(".starlight-view-modes-switcher-a").forEach(e=>{e.href&&(e.href=e.href.split("#")[0]+t)})}h();window.addEventListener("hashchange",h);When working on web applications, there is no standard baseline. The WML Components Base Library establishes a foundation for your application, ensuring consistency and scalability. The core of this library is the WMLUIProperty
, which represents the basic building block of every element in a web application. This property encapsulates all the essential features, and there are several subclasses like WMLRoute
for routes, WMLView
to leverage change detection, WMLImage
for images and WMLMotionUIProperty
for CSS animations and transitions. Each class has properties and methods to optimize your work in those features of your application. You can use this package and leave out the rest of the library and you will get very far building very robust and scalable applications
Section titled “Installation”Terminal window
npm install -s --verbose @windmillcode/wml-components-base
Section titled “WMLUIProperty”The Building Blocks Of Web Apps
<iframe src="https://stackblitz.com/edit/stackblitz-starters-ypqdk7?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>Section titled “WMLMotionUIProperty”Using CSS Animations
<iframe src="https://stackblitz.com/edit/stackblitz-starters-bvamvi?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>**[Decent Example](#wml-motion-ui-property-decent-example)**if you want a different animation for you animation states simply use a different keyframe mabye suffixing the keyframes with open and close for organization<iframe src="https://stackblitz.com/edit/stackblitz-starters-xkprmk?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>Pause And Play
if you want a different animation for you animation states simply use a different keyframe mabye suffixing the keyframes with open and close for organization<iframe src="https://stackblitz.com/edit/stackblitz-starters-8ts1nz?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>
Section titled “Using CSS transitions”the percentage values at the keyframe styles for transtions are only conceptual becuase there are no percentage values with css transitionsif you pause and play the transition it will not reset the element it was transitioning, but the timer and transition function will reset to their beginning stages**WMLMotionUIProperty Transition Simple Example**
<iframe src="https://stackblitz.com/edit/stackblitz-starters-779xe4?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>**[WMLMotionUIProperty Transition Decent Example](#wml-motion-ui-property-transition-decent-example)** <iframe src="https://stackblitz.com/edit/stackblitz-starters-y2crdv?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>**[WMLMotionUIProperty Transition Full Example](#wml-motion-ui-property-transition-full-example)** <iframe src="https://stackblitz.com/edit/stackblitz-starters-779xe4?ctl=1&embed=1&file=src%2Fmain.ts" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>Section titled “WMLCustomComponent”Custom Components
<iframe src="https://stackblitz.com/edit/stackblitz-starters-kmsw3c?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>Section titled “WMLUIProperty”
Property | Type | Description |
---|---|---|
isPresent |
boolean |
Indicates if the UI property is currently present. |
value |
any |
The value associated with this UI property. |
text |
string |
The text associated with this property. |
class |
string |
CSS class string for the property. |
style |
Partial<CSSStyleDeclaration> |
Inline styles for the property. |
type |
any |
The type of UI element (optional). |
click |
(evt?: Event) => void |
Function to handle click events. |
id |
string |
Unique identifier for the UI property. |
Method | Description |
---|---|
updateClassString |
Updates the class string based on the current state. |
toggleClassString |
Toggles a class string on or off. |
Property | Type | Description |
---|---|---|
framework | Framework |
Holds the detected framework information. |
Property | Type | Description |
---|---|---|
name | WMLUIFrameworkType |
The name of the detected UI framework. |
Property | Type | Description |
---|---|---|
url |
Function |
Function that defines the endpoint’s URL. |
automate |
boolean |
Indicates whether to automate API requests for the endpoint. |
Property | Type | Description |
---|---|---|
url |
URL |
Stores the constructed URL object based on provided properties. |
Name | Signature | Description |
---|---|---|
domain |
get domain(): string |
Retrieves the domain, including port if present. |
fqdn |
get fqdn(): string |
Returns the fully qualified domain name (FQDN). |
toString |
toString(): string |
Converts the URL object to a string. |
Section titled “WMLUri Constructor Parameters”
Name | Type | Description |
---|---|---|
scheme |
string |
Optional, defaults to "https" . |
host |
string |
Required, specifies the host name. |
port |
number |
Optional, specifies the port. |
path |
string |
Optional, specifies the path. |
query |
string |
Optional, specifies the query. |
fragment |
string |
Optional, specifies the fragment. |
Property | Type | Description |
---|---|---|
angular |
any |
Object containing Angular-specific properties like cdref . |
cdref |
any |
Angular’s ChangeDetectorRef, used for detecting changes in Angular applications (deprecated). |
Method | Description |
---|---|
get cdref |
Retrieves the ChangeDetectorRef from the Angular-specific properties (deprecated). |
set cdref |
Sets the ChangeDetectorRef in the Angular-specific properties (deprecated). |
Property | Type | Description |
---|---|---|
cdref |
any |
Angular’s ChangeDetectorRef used for change detection in Angular applications. |
Property | Type | Description |
---|---|---|
route |
string |
Defines the route for the application, default is ”/”. |
link |
string |
Optional link associated with the route. |
routerLink |
string |
Optional router link for navigation. |
Section titled “WMLMotionUIProperty”
Property | Type | Description |
---|---|---|
autoOpen |
boolean |
Automatically opens the UI element when true . |
helperStyles |
Partial<CSSStyleDeclaration> |
Necessary for animations to work properly. Modify only if you know what you are doing. |
keyFrameStyles |
{ [k: string]: Partial<CSSStyleDeclaration> } |
Object defining keyframe styles for animation. Use "0%" , "10%" , "11%" , … "100%" according to typical CSS keyframes for the key values. |
keyFrameName |
string |
Name of the unique animation keyframe or unique css transition class . |
motionState |
"open" | "opening" | "closing" | "closed" |
Current state of the motion . |
motionEndEvent |
any |
Function called at the end of an motion state. |
motionKeyFrameEvent |
any |
Function called at specific keyframes during the motion. |
currentTransitionInfo |
any |
Information about the current transition state, including keyframe, current styles, transition end styles, and play state. |
type |
"animation" | "transition" |
The type of motion to use, either CSS animations or CSS transitions. |
eventType |
"subject" | "callback" |
Defines whether the motion events are handled using subject (for Angular) or callback (for all other JS Environment). This controls how motionEndEvent and motionKeyFrameEvent are triggered. |
Method | Signature | Return Type | Description |
---|---|---|---|
get keyFrameName |
keyFrameName: string |
string |
Retrieves the current keyframe name used for the animation. |
set keyFrameName |
keyFrameName(name: string): void |
void |
Sets a unique keyframe name for the motion animation. |
getGroupMotionState |
getGroupMotionState(): WMLMotionUIPropertyState |
WMLMotionUIPropertyState |
Returns the current motion state of the animation group. |
motionEndEvent |
motionEndEvent(state: WMLMotionUIPropertyState): void |
void |
Function called at the end of an animation state. |
triggerMotionEndEvent |
triggerMotionEndEvent(motionState?: WMLMotionUIPropertyState): void |
void |
Triggers the motion end event with an optional motion state. |
motionKeyFrameEvent |
motionKeyFrameEvent(keyFrame: string): void |
void |
Function called at specific keyframes during transition animations. |
triggerMotionKeyFrameEvent |
triggerMotionKeyFrameEvent(keyFrame?: string): void |
void |
Triggers the motion keyframe event with an optional keyframe. |
animationEnd |
animationEnd(evt?: AnimationEvent): void |
void |
Handles the animation end event and updates the motion state accordingly. |
transitionEnd |
transitionEnd(evt?: TransitionEvent): void |
void |
Handles the transition end event and updates the motion state accordingly. |
openMotion |
openMotion(): void |
void |
Triggers the opening animation. |
closeMotion |
closeMotion(): void |
void |
Triggers the closing animation. |
pauseMotion |
pauseMotion(): void |
void |
Pauses the current motion animation or transition. |
resumeMotion |
resumeMotion(): void |
void |
Resumes the motion animation or transition if it was paused. |
injectKeyFrames |
injectKeyFrames(): void |
void |
Injects custom keyframes for the motion animation into the document’s styles. |
updateKeyFrames |
updateKeyFrames(props:WMLMotionUIProperty["keyFrameStyles"]): void |
void |
Injects custom keyframes for the motion animation into the document’s styles. |
createKeyFrameName |
createKeyFrameName(): void |
void |
Creates a unique keyframe name for the motion animation. |
checkForDuplicateKeyFrameNames |
checkForDuplicateKeyFrameNames(): boolean |
boolean |
Checks for duplicate keyframe names and returns true if a duplicate is found. |
setupTransitions |
setupTransitions(): void |
void |
Sets up transitions for motion when using the "transition" type. |
getElement |
getElement(): Element |
Element |
Returns the HTML element associated with this motion property. |
getTransitionProperties |
getTransitionProperties(): any |
any |
Retrieves the transition properties of the element. |
currentTransitionInfo
Section titled “currentTransitionInfo”
Property | Type | Description |
---|---|---|
keyframe |
string |
Current keyframe percentage (e.g., "0%" ). |
currentStyles |
object |
Current styles applied to the element. |
transitionEndStyles |
Array<string> |
List of CSS properties that have completed transitioning. |
playState |
string |
Current play state of the transition (e.g., "running" , "paused" ). |
Section titled “WMLMotionUIPropertyState”
Value | Description |
---|---|
open |
The UI element is fully open. |
opening |
The UI element is in the process of opening. |
closing |
The UI element is in the process of closing. |
closed |
The UI element is fully closed. |
Section titled “WMLCustomComponent”
Property | Type | Description |
---|---|---|
cpnt |
C |
The custom component being wrapped. |
props |
P |
Properties associated with the custom component. |
Section titled “WMLImage<V=any,T=any>”
Property | Type | Description |
---|---|---|
src |
string |
Source URL for the image. |
alt |
string |
Alt text for accessibility purposes. |
ariaLabel |
string |
ARIA label for screen readers. |
ariaExpanded |
boolean |
Indicates whether the image is in an expanded state. Default is false . |
Name | Signature | Description |
---|---|---|
onError |
(event?: any) => void |
Handles the error event when loading the image. |
Property | Type | Description |
---|---|---|
runningONE2E |
boolean |
Indicates if an E2E (end-to-end) test is currently running. |
data |
any |
Data associated with the E2E test. |
Property | Type | Description |
---|---|---|
queue |
T[] |
Internal array representing the queue of items. |
Method | Description |
---|---|
enqueue(item: T) |
Adds an item to the queue. |
dequeue() |
Removes and returns the first item in the queue. |
isEmpty() |
Checks if the queue is empty. |
size() |
Returns the number of items in the queue. |
getElementAt(index: number) |
Retrieves the element at a specific index in the queue. |
Section titled “WMLAPIPageRequestModelFilterPredicateEnum”
Property | Type | Description |
---|---|---|
EQUALS |
string |
Filter predicate to check if a value is equal. |
STARTSWITH |
string |
Filter predicate to check if a value starts with a string. |
ENDSWITH |
string |
Filter predicate to check if a value ends with a string. |
CONTAINS |
string |
Filter predicate to check if a value contains a string. |
Section titled “WMLAPIPaginationRequestModel”
Property | Type | Description |
---|---|---|
fields |
Array<{ value: any }> |
Array of fields included in the request. |
filter |
Array<{ key: string, value: any, predicate?: WMLAPIPageRequestModelFilterPredicateEnum }> |
Filter criteria with optional predicates. |
sort |
Array<{ key: string, direction: "ASC" | "DESC" | "" }> |
Sorting criteria for the request. |
cursor |
{ value?: string, order?: number } |
Cursor-based pagination options. |
pageNum |
number |
Current page number in the pagination request. |
pageSize |
number |
Number of items per page. |
errorOccuredIsPresent |
boolean |
Indicates if an error occurred during the request. |
Method | Description |
---|---|
getIndexInfo() |
Returns start and end index information for the current page. |
Section titled “WMLAPIPaginationResponseModel”
Property | Type | Description |
---|---|---|
columns |
Array<{ value: string, type?: string }> |
Array of columns in the response data. |
data |
Array<any> |
Array of data returned by the API. |
metadata |
{ startOrderValue?: number } |
Metadata about the response, including start order values. |
pageNum |
number |
Current page number in the response. |
pageSize |
number |
Number of items per page in the response. |
totalPages |
number |
Total number of pages in the response. |
totalItems |
number |
Total number of items in the response. |
Method | Description |
---|---|
getIndexInfo() |
Returns start and end index information for the current page. |
calculateCurrentState() |
Calculates pagination state based on total items and pages. |
calcSectionBasedOnPageDetails() |
Slices data into sections based on page details. |
Section titled “WMLDeepPartial”
Description |
---|
WMLDeepPartial<T> is a type that makes all properties of a type T optional, and if a property is an object, it recursively makes all of its properties optional as well. Functions are left unchanged. |
Type BehaviorSection titled “Type Behavior”
Condition | Behavior |
---|---|
T[K] is a function |
Keeps the function type intact. |
T[K] is an object |
Recursively makes all properties of the object optional using WMLDeepPartial . |
T[K] is neither a function nor object |
The property becomes optional. |
Signature | Return Type | Description |
---|---|---|
updateGlobal(props: WMLDeepPartial<WMLUIGlobal & { propFrameworkName?: string }>) |
void |
Updates the global WINDMILLCODE object with provided properties and optionally changes framework name. useful if detectframework gets the framework name wrong |
props
Section titled “props”
Property | Type | Description |
---|---|---|
propFrameworkName |
string (optional) |
Optionally updates the framework name in the global object. |
…rest | WMLDeepPartial<WMLUIGlobal> |
All other properties of WMLUIGlobal to be applied globally. |
Section titled “getGlobalObject”
Signature | Return Type | Description |
---|---|---|
getGlobalObject(): any |
any |
Returns the appropriate global object based on the environment: globalThis , window , global , or self . |
Return Object
Section titled “Return Object”
Property | Type | Description |
---|---|---|
globalThis | any |
Standard ECMAScript global object. |
window | any |
Global object for browser environments. |
global | any |
Global object for Node.js environments. |
self | any |
Global object for Web Workers. |
Object |
Fallback empty object if none of the above globals are available. |
Section titled “detectFramework”
Signature | Return Type | Description |
---|---|---|
detectFramework(): WMLUIFrameworkType |
WMLUIFrameworkType |
Detects the framework used in the environment (React, Angular, Vue.js, etc.). |
myWindow
Section titled “myWindow”
Property | Type | Description |
---|---|---|
myWindow | any |
Represents the global window object or an empty object if window is undefined. |
Section titled “generateUUID(prefix: string)”
Description |
---|
Generates a UUID with an optional prefix and returns it as a string. |
Section titled “generateClassPrefix(prefix: string)”
Description |
---|
Returns a function that generates class names based on the provided prefix. If the value is empty, it returns the first part of the prefix. |
Section titled “generateIdPrefix(prefix: string)”
Description |
---|
Returns a function that generates ID names based on the provided prefix. If the value is empty, it returns the first part of the prefix. |
Section titled “fillMissingProperties(source: object, target: object)”
Description |
---|
Recursively fills missing properties in the target object from the source object. If a property exists in both, the target keeps its value. |
Section titled “updateClassString(obj: any, myClassDefault: string, classListDefault: string)”
Description |
---|
Returns a function to manage the class list of an object. Can add, remove, toggle, or clear class names based on the current state of the object. |
Section titled “toggleClassString(targetClass: string, classList: Array, predicate: Function)”
Description |
---|
Toggles a class string on or off within the provided class list. The predicate function determines the action. |
Section titled “generateRandomNumber(range: number, additional: number)”
Description |
---|
Generates a random number within the specified range and adds the additional value. |
Section titled “generateRandomColor()”
Description |
---|
Generates a random hex color code. |
Section titled “selectRandomOptionFromArray(myArray: Array, index?: number)”
Description |
---|
Selects a random element from an array. Optionally, an index can be provided to limit the range. |
Section titled “replaceValuesWithPaths(obj: any, path: string, predicate: Function): T”
Description |
---|
Recursively replaces values in an object with their corresponding path. The predicate function is used to modify the path value. |
Section titled “WMLUIPropertyDecorator(target: any, key: any)”
Description |
---|
Obsolete decorator for handling UI properties. |
Section titled “v0.9.4”added WMLQueue just a regular Queue data structure thats all
Section titled “v0.9.5”added index accessing for WMLQueue
Section titled “v0.10.0”add generateRandomNumber, generateRandomColor,and selectRandomOptionFromArraywml
Section titled “v0.10.1”returned the ref created by addCustomComponent
Section titled “v0.10.2”WMLAPIPaginationRequestModel[“sort”][number][“direction”] enums are now “ASC” |“DESC” | ""
Section titled “v0.10.3”add WMLAPIPaginationResponseModel[“columns”] of type
Array<{
value:string,
type?:string
}>
to provide the developer column information
Section titled “v0.10.4”made WMLAPIPaginationResponseModel[“data”] Array generic
Section titled “v0.10.5”added generateClassPrefix method to functions
Section titled “v0.10.6”updated Function signatuire on WMLUIProperty##click so the event option is optional
Section titled “v0.11.0”provided WMLNGXTranslateLoader to work with ngx-translateprovided WMLModuleForRootProps to work with
Section titled “v0.11.1”attempting to deal with an issue where numbers are being returned if no feature is present
Section titled “v1.0.0”major change functions##addCustomComponent ref.instance.ngOnInit?.() only gets called if the angular versions is less than 14.1.0
Section titled “v1.1.0”minor changeadded WMLDeepPartial, a utility types that will make all your nested properties optionalmodified WMLNGXTranslateLoader##i18nLocation to return undefined so numbers dont turn to the indexes of the string
Section titled “v2.0.0”MAJOR rename to angular-wml-components-base
Section titled “v2.1.1”added fn replaceValuesWithPaths which will recursively go through an object and return a new obj with its values in path representation great for i18n
Section titled “v2.1.2”made a fix in genearate random color, where some times 5 digits where returned
Section titled “v2.2.0”WMLUIProperty.id by default is "" should help with type should hurt if your code depends on it it is still optional
Section titled “v2.2.3”generateClassPrefix prefix parameter supports ="" as default use case,ids and will remove the subsequent _ if its thereWMLUIProperty[“id”] default param is ""
Section titled “v16.2.5-0”provided access to WMLOptionsProps to the the container cpnt
Section titled “v16.2.70”wmlapipaginationrequestmodel##filter[].value is now the any type %!(EXTRA string=
Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package),
Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,
Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,
Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package
Section titled “v16.2.92”provided spyOnForES6Imports, which finally allows you to spyOnFunctions on es6 imports however refer to the stack overflow project on how toconfigure your angular appin order to get this to work it will not work alone*in test.ts
...
const { defineProperty } = Object;
Object.defineProperty = function(object, name, meta) {
if (meta.get && !meta.configurable) {
// it might be an ES6 exports object
return defineProperty(object, name, {
...meta,
configurable: true,
});
}
return defineProperty(object, name, meta);
};
...
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
tsconfig.spec.json
...
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine","node"
],
"module": "commonjs"
},
...
Section titled “v16.2.93”added mockDeclarations to wmltestutils so users can add their declarations ,
Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features
Section titled “v16.2.112”update type inference for replaceValuesWithPaths to be more friendly
Section titled “v16.2.113”added createBasicObservableError and WMLTestHttpHandler for interceptor test cases and throwing observable errors ,
Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package
Section titled “v17.0.21”added data-source-utils.ts to help with pagination and data source logic ,
Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,
Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,
Section titled “v17.0.60”updated package to reflect the version ^17.0.6 of @angular/core package,
Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package
Section titled “v17.0.7300”added WMLAnimateUIProperty as the basis for all entities meant to be animated,
Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.8300”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package
Section titled “v17.0.8100”prevented animation end event from propagating to child events, given the children are not exactly the same as the parent, ,
Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v17.0.8102”added WMLAnimateUIProperty[“helperStyles”] to help animations run more smootly its value is
helperStyles:WMLUIProperty["style"]={
transform:"translate3d(0,0,0)"
}
and you can overwrite it as necessary ,
Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v17.0.9001”added generateIdPrefix ,
Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package
Section titled “v17.1.2”[BREAKING CHANGE] added WMLAnimateUIProperty.autoOpen, by default animations dont don anything if you need your animations to autoOpen simply go through all your class instances and make the update,
Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.2000 [2/5/24]”updated package to reflect the version ^17.1.2 of @angular/core package
Section titled “v17.1.2001 [2/8/24]”added toggle functionality for updateClassString ,
Section titled “v17.1.2001 [2/8/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.3001 [2/8/24]”updated package to reflect the version ^17.1.3 of @angular/core package,
Section titled “v17.1.3000 [2/8/24]”updated package to reflect the version ^17.1.3 of @angular/core package,
Section titled “v17.2.1000 [2/17/24]”updated package to reflect the version ^17.2.1 of @angular/core package,
Section titled “v17.2.2000 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,
Section titled “v17.2.2001 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,
Section titled “v17.2.3000 [2/28/24]”updated package to reflect the version ^17.2.3 of @angular/core package
Section titled “v17.2.3001 [3/22/24]”created WMLComponentBaseZero which shortens and hides the complex logic of
our WMLComponentsNew FeaturesSection titled “New Features”Introduced WMLComponentBaseZero
, a new base class designed to simplify and encapsulate the complex logic associated with WML components. This enhancement aims to provide a cleaner and more intuitive interface for working with WML components.Enhancements in component-base.ts
:Section titled “Enhancements in component-base.ts:”Refactored WMLComponentBaseZeroProps
:
Transitioned from a traditional class-based approach to a mixin-based pattern using WMLComponentBaseZeroPropsMixin
. This change is intended to enhance flexibility and reusability across different component implementations.The mixin WMLComponentBaseZeroPropsMixin
is now used to dynamically extend a base class, incorporating custom properties and methods essential for WML components.Introduced a new setState
method within the mixin, providing a streamlined way to update component state.Introduced WMLComponentBaseZero
:
This new base class leverages WMLComponentBaseZeroProps
to offer a robust foundation for component development.The constructor now initializes class and ID prefixes if they are provided, enabling more consistent and predictable styling and DOM structure.Enhanced the listenForSetState
method to work seamlessly with the new state management approach, ensuring changes are propagated efficiently and reliably.Key Changes to Note:Section titled “Key Changes to Note:”The listenForSetState
method now listens to changes from setStateSubj
, aligning with the new state management strategy.Destructor ( ngOnDestroy
) logic has been updated to ensure proper cleanup, reducing the risk of memory leaks and ensuring better resource management.Usage:Section titled “Usage:”To leverage the new WMLComponentBaseZero
, extend your components from this base class and utilize the provided mechanisms for state management and lifecycle handling.The mixin approach offers enhanced customization, allowing developers to inject additional properties or methods as needed.Recommendations:Section titled “Recommendations:”Review the updated implementation details in WMLComponentBaseZero
and WMLComponentBaseZeroPropsMixin
to fully understand the new component structure and behavior.Test your components thoroughly to ensure compatibility with the new base class and to leverage the improvements in state management and lifecycle handling.This update signifies our commitment to improving the developer experience and streamlining component development within the WML ecosystem.
,
Section titled “v17.2.3001 [3/2/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v17.2.3002 [3/5/24]”[UPDATE] Added a new fields
array of type Array<{value:any}>
to the WMLAPIPaginationRequestModel
class in data-source-utils.ts
. This new field is designed to hold additional data fields that may be required during pagination requests.
[PATCH] Modified the animationEnd
method in the WMLAnimateUIProperty
class within models.ts
. The condition now removes any spaces from this.animationClass
before checking its presence in the event target’s className. This ensures the animation end logic accurately identifies the target regardless of space characters in the class name.
,
Section titled “v17.2.3002 [3/5/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4000 [3/8/24]”updated package to reflect the version ^17.2.4 of @angular/core package
Section titled “v17.2.4002 [3/12/24]”[PATCH] In wml-components-base/src/lib/component-base.ts
, added a new ReplaySubject
called setStateEvent
, which enhances state management within the component. Also adjusted the RxJS pipe in the setState
method to include an additional operation that emits the updated state to setStateEvent
, improving the reactivity of the component state.,
Section titled “v17.2.4002 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4003 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4004 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.3.0 [3/17/24]”updated package to reflect the version ^17.3.0 of @angular/core package ,
Section titled “v17.3.1000 [3/22/24]”updated package to reflect the version ^17.3.1 of @angular/core package,
Section titled “v17.3.2000 [3/28/24]”updated package to reflect the version ^17.3.2 of @angular/core package,
Section titled “v17.3.3000 [4/4/24]”updated package to reflect the version ^17.3.3 of @angular/core package,
Section titled “v17.3.4000 [4/11/24]”updated package to reflect the version ^17.3.4 of @angular/core package
Section titled “v17.3.4001 [4/16/24]”added onError to wmlimage prperty ,
Section titled “v17.3.4001 [4/16/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.3.5000 [4/20/24]”updated package to reflect the version ^17.3.5 of @angular/core package
Section titled “v17.3.5110 [4/20/24]”[UPDATE] ensure dervied class passed type to base classes
Updated models.ts by add the WMLConstructorDecorator function, to streamline and optimize object initialization practices within the framework.
constructor(props:Partial<T>={}){
let origProps = Object.entries(props).filter(([key, val]) => {
return !key.startsWith('param');
});
Object.assign(this, { ...Object.fromEntries(origProps) });
}
so as not to overwhelm developers to use
@WMLConstructorDecorator
export class T {
constructor(props: Partial<T> = {}) { }
}
,
Section titled “v17.3.5110 [5/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.3.6000 [5/1/24]”updated package to reflect the version ^17.3.6 of @angular/core package,
Section titled “v17.3.7000 [5/4/24]”updated package to reflect the version ^17.3.7 of @angular/core package,
Section titled “v17.3.7000 [5/9/24]”updated package to reflect the version ^17.3.7 of @angular/core package,
Section titled “v17.3.8000 [5/9/24]”updated package to reflect the version ^17.3.8 of @angular/core package,
Section titled “v17.3.9000 [5/16/24]”updated package to reflect the version ^17.3.9 of @angular/core package,
Section titled “v18.0.0 [5/22/24]”updated package to reflect the version ^18.0.0 of @angular/core package,
Section titled “v18.0.1 [5/22/24]”updated package to reflect the version ^18.0.0 of @angular/core package
Section titled “v18.0.4 [5/25/2024 12:50:12 AM EST]”[UPDATE] Modified replaceValuesWithPaths function in functions.ts to include a predicate for custom assignments.
File: functions.ts Section: replaceValuesWithPaths Function: replaceValuesWithPaths() ,
Section titled “v18.0.4 [5/25/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.1000 [5/29/24]”updated package to reflect the version ^18.0.1 of @angular/core package ,
Section titled “v18.0.2000 [6/6/24]”updated package to reflect the version ^18.0.2 of @angular/core package,
Section titled “v18.0.3000 [6/13/24]”updated package to reflect the version ^18.0.3 of @angular/core package,
Section titled “v18.0.3000 [6/13/24]”updated package to reflect the version ^18.0.3 of @angular/core package,
Section titled “v18.0.3000 [6/13/24]”updated package to reflect the version ^18.0.3 of @angular/core package
Section titled “v18.0.3010 [6/18/2024 ]”[FIX] projects/wml-components-base/src/lib/models.ts
- WMLConstructorDecorator
function: Added props
to this.wmlInit?.(props)
. This means developers can now pass props
to wmlInit
.
,
Section titled “v18.0.3010 [6/18/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.3010 [6/18/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.4010 [6/23/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.4000 [6/23/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.4000 [6/23/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.5000 [6/26/24]”updated package to reflect the version ^18.0.5 of @angular/core package,
Section titled “v18.0.6000 [7/5/24]”updated package to reflect the version ^18.0.6 of @angular/core package,
Section titled “v18.1.0 [7/10/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.0 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.3000 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.3 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.4 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.4 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package
Section titled “v18.1.6 [7/14/24]”[FIX] fixed an error with WMLConstructorDecorator where WMLInit was not being called ,
Section titled “v18.1.6 [7/14/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.6 [7/14/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.1000 [7/18/24]”updated package to reflect the version ^18.1.1 of @angular/core package,
Section titled “v18.1.2000 [7/24/24]”updated package to reflect the version ^18.1.2 of @angular/core package
Section titled “v18.1.2300”7/27/2024 02:15:42 PM EST
[update] WMLRoute now extends WMLView in models.ts. If you were using WMLRoute, you now have access to WMLView’s properties, like cdref.
[update] Added new properties link and routerLink to WMLRoute in models.ts. This gives more flexibility for routing in your components.
[UPDATE] Changed WMLImage class to extend WMLRoute instead of WMLUIProperty in models.ts. This means WMLImage now includes routing properties route, link, and routerLink as well as cdref from WMLView ,
Section titled “v18.1.2230 [7/27/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.2300 [7/27/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.2301 [7/30/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3000 []”[MAJOR BREAKING CHANGES]WMLUIProperty id attribute is undefined by default this is for accessbility and QA so values are not all defined with "" ,
Section titled “v18.1.3000-beta0 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta1 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta2 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta3 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta4 [8/1/24]”
Section titled “v18.1.3000-beta13 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3001 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3001 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3002 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3002 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3003 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3004 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3005 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3006 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3007 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.4000 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.4001 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.0 [8/15/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.1 [8/20/24]”[BREAKING CHANGE] removed WMLButton and WMLButton2 use WMLButtonOneProps for WMLButton and WMLButtonZeroProps for WMLButton2
Section titled “v18.2.1 [8/20/24]”updated package to reflect the version 18.2.0 of @angular/core package
Section titled “v18.2.1 [8/20/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.1000 [8/22/24]”updated package to reflect the version 18.2.1 of @angular/core package
Section titled “v18.2.2000 [8/30/24]”updated package to reflect the version 18.2.2 of @angular/core package
Section titled “v18.2.2100 [9/1/2024]”[BREAKING CHANGE] projects/wml-components-base/src/lib/models.ts
WMLAnimateUIProperty logic has changed to become more compact. Removed animationClass,beginOpenStyles beginCloseStyles endOpenStyles endCloseStyles animationClass , now using keyFrameName
and keyFrameStyles
instead. Your animations might break if you were relying on the class name. Update your code to use keyFrameName
.
[UPDATE] projects/wml-components-base/src/lib/models.ts
Added keyFrameName
to name your keyframe. Every keyframe name must be unique. If you don’t follow this rule, you’ll get an error.
[UPDATE] projects/wml-components-base/src/lib/models.ts
WMLAnimateUIProperty has injectKeyFrames
method now generates and inserts keyframes based on keyFrameName
.
Section titled “v18.2.2101 [9/1/2024]”[UPDATE] IF WMLAnimateUIProperty.keyFrameName is left out an internal one is generated
Section titled “v18.2.2200 [9/3/24]”[BREAKING CHANGE] WMLAnimateUIProperty is now WMLMotionUIProperty and anywhere you see animate on the class (careful not to confuse with css) change to motion
Section titled “v18.2.2200 [9/3/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3000 [9/4/24]”updated package to reflect the version 18.2.3 of @angular/core package
Section titled “v18.2.3100 [9/8/24]”[BREAKING CHANGE] seperated angular features from core library to angular-wml-components-base moving WMLComponentBaseZeroPropsMixin, WMLComponentBaseZeroProps, WMLComponentBaseZero,addCustomComponent, WMLNGXTranslateLoader,WMLTestUtils to the angular base library deleting WMLModuleForRootProps
Section titled “v18.2.3110 [9/10/2024 1:45:22 PM EST]”[UPDATE] Added new global object management functions updateGlobal
and getGlobalObject
in functions.ts
. This gives developers access to globally update and retrieve the framework’s global object easily.
[UPDATE] Added a new WMLUIGlobal
class in models.ts
to represent the global configuration options for the library
[FIX] All references to WMLUIProperty.framework
have been replaced with getGlobalObject().WINDMILLCODE.framework.name
. Developers should now use the global framework object instead of relying on the static WMLUIProperty.framework
.
Section titled “v18.2.3110 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3110 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3111 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3112 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3200 [9/16/24]”[UPDATE] added css transitions and pause & play functionaity to WMLMotionUIPropertyupdated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.4000 [9/16/24]”updated package to reflect the version 18.2.4 of @angular/core package
Section titled “v18.2.4100 [9/19/24]”[FIX] fixed a bug where if the developer did not provided the keyframes in order the css transition would not follow the order according to the keyframe flags and even break[UPDATE] New helper function updateKeyFrames one simple step now to update your keyframes
Section titled “v18.2.4200 [9/21/24]”[BREAKING CHANGE] - chaned spelling error from injectKeyframes to injectKeyFrames IN WMLMotionUIProperty
Section titled “v18.2.4200 [9/21/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.5001 [9/22/24]”updated package to reflect the version 18.2.5 of @angular/core package
Section titled “v18.2.6000 [10/1/24]”updated package to reflect the version 18.2.6 of @angular/core package
Section titled “v18.2.7000 [10/2/24]”updated package to reflect the version 18.2.7 of @angular/core package
Section titled “v18.2.7001 [10/5/2024 11:03:42 AM EST]”[UPDATE] onError property updated in projects/wml-components-base/src/lib/models.ts
Previously onError
was optional. Now it’s an empty function by default.
This means if onError
is not set, it still exists as a function and won’t cause issues.
Developers don’t have to worry about onError
being undefined anymore.
Section titled “v18.2.7010 [10/9/2024 11:20:32 AM EST]”[UPDATE] projects/wml-components-base/src/lib/models.ts added WMLUri class, which lets you build URLs with scheme, host, port, path, query, and fragment. You can now use this to manage URLs and get domain or fqdn directly.
Section titled “v18.2.7020 [10/10/2024 2:15:30 PM EST]”[PATCH]
In WMLMotionUIProperty
inside projects/wml-components-base/src/lib/models.ts
, added a new eventType
property to handle either “subject” or “callback” events. If you’re dealing with frameworks like Angular, expect this to default to “subject.” but you can override at your covenience just know that you cant use both becuase internally there would be a conflict with the management of static variables between the two classes
[UPDATE]
The triggerMotionEndEvent
and triggerMotionKeyFrameEvent
functions now use the eventType
to decide how to handle events, so make sure you adjust accordingly if your app isn’t Angular-based. in WMLMotionUIProperty
[UPDATE]
Deprecated comments on cdref
getter and setter were removed in WMLView
inside projects/wml-components-base/src/lib/models.ts
. You won’t see any more notes about using angular.cdref
—just use it directly now.
Section titled “v18.2.8000 [10/10/24]”updated package to reflect the version 18.2.8 of @angular/core package
Section titled “v18.2.8000 [10/11/24]”updated package to reflect the version 18.2.8 of @angular/core package
Section titled “v18.2.8001 [10/11/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.9000 [10/23/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.10000 [10/31/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.11000 [11/7/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.12000 [11/15/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.12001 [11/17/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.0 [11/19/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.3 [11/20/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.4 [11/26/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.1000 [11/26/24]”updated package to conform with @windmillcode/wml-components-base