WML Components Base

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

Installation

npm install -s --verbose @windmillcode/wml-components-base

Usage

WMLUIProperty

The Building Blocks Of Web Apps

WMLMotionUIProperty

Using CSS Animations

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

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

Using CSS transitions

• the percentage values at the keyframe styles for transtions are only conceptual becuase there are no percentage values with css transitions
• if 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

WMLMotionUIProperty Transition Decent Example

WMLMotionUIProperty Transition Full Example

WMLCustomComponent

Custom Components

References

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.

Methods

Method	Description
updateClassString	Updates the class string based on the current state.
toggleClassString	Toggles a class string on or off.

WMLUIGlobal

Property	Type	Description
framework	Framework	Holds the detected framework information.

framework

Property	Type	Description
name	WMLUIFrameworkType	The name of the detected UI framework.

WMLEndpoint

Property	Type	Description
url	Function	Function that defines the endpoint’s URL.
automate	boolean	Indicates whether to automate API requests for the endpoint.

WMLUri

Property	Type	Description
url	URL	Stores the constructed URL object based on provided properties.

Methods

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.

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.

WMLView extends WMLUIProperty

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).

Methods

Method	Description
get cdref	Retrieves the ChangeDetectorRef from the Angular-specific properties (deprecated).
set cdref	Sets the ChangeDetectorRef in the Angular-specific properties (deprecated).

angular

Property	Type	Description
cdref	any	Angular’s ChangeDetectorRef used for change detection in Angular applications.

WMLRoute extends WMLUIProperty

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.

WMLMotionUIProperty extends WMLView

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.

Methods

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

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").

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.

WMLCustomComponent

Property	Type	Description
cpnt	C	The custom component being wrapped.
props	P	Properties associated with the custom component.

WMLImage<V=any,T=any> extends WMLRoute

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.

Methods

Name	Signature	Description
onError	(event?: any) => void	Handles the error event when loading the image.

WMLE2ETarget

Property	Type	Description
runningONE2E	boolean	Indicates if an E2E (end-to-end) test is currently running.
data	any	Data associated with the E2E test.

WMLQueue

Property	Type	Description
queue	T[]	Internal array representing the queue of items.

Methods

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.

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.

WMLAPIPageRequestModel (WMLAPIPaginationRequestModel is deprecated)

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.

Methods

Method	Description
getIndexInfo()	Returns start and end index information for the current page.

WMLAPIPageResponseModel (WMLAPIPaginationResponseModel is deprecated)

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.

Methods

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.

WMLStringObject

Property	Type	Description
orig	string	Original string value to operate on. Default is "myString".
entitySuffix	string	Suffix to strip from the original string. Default is an empty string.
prefix	string	Prefix derived by splitting orig using entitySuffix.

Methods

Name	Signature	Description
camelCase	(stripSuffix: boolean, suffix: string) => string	Converts the string to camelCase.
classify	(stripSuffix: boolean, suffix: string) => string	Converts the string to a classified format (PascalCase).
capitalize	(stripSuffix: boolean, suffix: string) => string	Capitalizes the first letter of the string and lowers the rest.
dasherize	(stripSuffix: boolean, suffix: string) => string	Converts the string to a dashed format (kebab-case).
lowerCase	(stripSuffix: boolean, suffix: string) => string	Converts the string to lowercase.
pascalCase	(stripSuffix: boolean, suffix: string) => string	Converts the string to PascalCase.
upperCase	(stripSuffix: boolean, suffix: string) => string	Converts the string to uppercase.
titleCase	(stripSuffix: boolean, suffix: string) => string	Converts the string to title case, capitalizing the first letter of each word.
snakeCase	(stripSuffix: boolean, suffix: string) => string	Converts the string to snake case (e.g., “my-string” becomes “my_string”).

WML_WINDOW

Property	Type	Description
	Window | {}	The representation of the browser window. Its {} in non-browser environments.

WML_DOCUMENT

Property	Type	Description
	Document | {}	The representation of the browser document. Its {} in non-browser environments.

Types

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 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.

Functions

updateGlobal

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

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.

getGlobalObject

Signature	Return Type	Description
getGlobalObject(): any	any	Returns the appropriate global object based on the environment: globalThis, window, global, or self.

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.

detectFramework

Signature	Return Type	Description
detectFramework(): WMLUIFrameworkType	WMLUIFrameworkType	Detects the framework used in the environment (React, Angular, Vue.js, etc.).

myWindow

Property	Type	Description
myWindow	any	Represents the global window object or an empty object if window is undefined.

generateUUID(prefix: string)

Description
Generates a UUID with an optional prefix and returns it as a string.

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.

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.

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.

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.

toggleClassString(targetClass: string, classList: Array<string>, predicate: Function)

Description
Toggles a class string on or off within the provided class list. The predicate function determines the action.

generateRandomNumber(range: number, additional: number)

Description
Generates a random number within the specified range and adds the additional value.

generateRandomColor()

Description
Generates a random hex color code.

selectRandomOptionFromArray(myArray: Array<any>, index?: number)

Description
Selects a random element from an array. Optionally, an index can be provided to limit the range.

replaceValuesWithPaths<T>(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.

WMLUIPropertyDecorator(target: any, key: any)

Description
Obsolete decorator for handling UI properties.

Changelog

v0.9.4

added WMLQueue just a regular Queue data structure thats all

v0.9.5

added index accessing for WMLQueue

v0.10.0

add generateRandomNumber, generateRandomColor,and selectRandomOptionFromArraywml

v0.10.1

returned the ref created by addCustomComponent

v0.10.2

WMLAPIPaginationRequestModel[“sort”][number][“direction”] enums are now “ASC” |“DESC” | ""

v0.10.3

add WMLAPIPaginationResponseModel[“columns”] of type

Array<{
    value:string,
    type?:string
  }>

to provide the developer column information

v0.10.4

made WMLAPIPaginationResponseModel[“data”] Array generic

v0.10.5

added generateClassPrefix method to functions

v0.10.6

• updated Function signatuire on WMLUIProperty##click so the event option is optional

v0.11.0

• provided WMLNGXTranslateLoader to work with ngx-translate
• provided WMLModuleForRootProps to work with

v0.11.1

• attempting to deal with an issue where numbers are being returned if no feature is present

v1.0.0

• major change functions##addCustomComponent ref.instance.ngOnInit?.() only gets called if the angular versions is less than 14.1.0

v1.1.0

• minor change
• added WMLDeepPartial, a utility types that will make all your nested properties optional
• modified WMLNGXTranslateLoader##i18nLocation to return undefined so numbers dont turn to the indexes of the string

v2.0.0

• MAJOR rename to angular-wml-components-base

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

v2.1.2

• made a fix in genearate random color, where some times 5 digits where returned

v2.2.0

• WMLUIProperty.id by default is "" should help with type should hurt if your code depends on it it is still optional

v2.2.3

• generateClassPrefix prefix parameter supports ="" as default use case,ids and will remove the subsequent _ if its there
• WMLUIProperty[“id”] default param is ""

v16.2.5-0

• provided access to WMLOptionsProps to the the container cpnt

v16.2.70

• wmlapipaginationrequestmodel##filter[].value is now the any type %!(EXTRA string=

v16.2.80

• updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

• updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

• updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

• updated package to reflect the version 16.2.91 of @angular/core package

v16.2.92

• provided spyOnForES6Imports, which finally allows you to spyOnFunctions on es6 imports however refer to the stack overflow project on how to configure your angular app in 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"
  },
...

v16.2.93

• added mockDeclarations to wmltestutils so users can add their declarations ,

v16.2.93

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.100

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.110

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features

v16.2.112

• update type inference for replaceValuesWithPaths to be more friendly

v16.2.113

• added createBasicObservableError and WMLTestHttpHandler for interceptor test cases and throwing observable errors ,

v16.2.120

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.10

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.11

• updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.20

• updated package to reflect the version ^17.0.2 of @angular/core package

v17.0.21

• added data-source-utils.ts to help with pagination and data source logic ,

v17.0.40

• updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

• updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

• updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

• updated package to reflect the version ^17.0.7 of @angular/core package

v17.0.7300

• added WMLAnimateUIProperty as the basis for all entities meant to be animated

,

v17.0.7300

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8300

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7300

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.80

• updated package to reflect the version ^17.0.8 of @angular/core package

v17.0.8100

• prevented animation end event from propagating to child events, given the children are not exactly the same as the parent, ,

v17.0.8100

• updated package to conform with @windmillcode/angular-wml-components-base

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 ,

v17.0.8103

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9000

• updated package to conform with @windmillcode/angular-wml-components-base

v17.0.9001

• added generateIdPrefix ,

v17.0.9000

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9001

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.0000

• updated package to reflect the version ^17.1.0 of @angular/core package

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

,

v17.1.2

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.1000

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.2000 [2/5/24]

• updated package to reflect the version ^17.1.2 of @angular/core package

v17.1.2001 [2/8/24]

• added toggle functionality for updateClassString ,

v17.1.2001 [2/8/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.3001 [2/8/24]

• updated package to reflect the version ^17.1.3 of @angular/core package,

v17.1.3000 [2/8/24]

• updated package to reflect the version ^17.1.3 of @angular/core package,

v17.2.1000 [2/17/24]

• updated package to reflect the version ^17.2.1 of @angular/core package,

v17.2.2000 [2/23/24]

• updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.2001 [2/23/24]

• updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.3000 [2/28/24]

• updated package to reflect the version ^17.2.3 of @angular/core package

v17.2.3001 [3/22/24]

• created WMLComponentBaseZero which shortens and hides the complex logic of our WMLComponents

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:

1. 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.

2. 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:

• 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:

• 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:

• 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. ,

v17.2.3001 [3/2/24]

• updated package to conform with @windmillcode/angular-wml-components-base

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. ,

v17.2.3002 [3/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4000 [3/8/24]

• updated package to reflect the version ^17.2.4 of @angular/core package

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.

,

v17.2.4002 [3/12/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4003 [3/13/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4004 [3/13/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.0 [3/17/24]

• updated package to reflect the version ^17.3.0 of @angular/core package ,

v17.3.1000 [3/22/24]

• updated package to reflect the version ^17.3.1 of @angular/core package,

v17.3.2000 [3/28/24]

• updated package to reflect the version ^17.3.2 of @angular/core package,

v17.3.3000 [4/4/24]

• updated package to reflect the version ^17.3.3 of @angular/core package,

v17.3.4000 [4/11/24]

• updated package to reflect the version ^17.3.4 of @angular/core package

v17.3.4001 [4/16/24]

• added onError to wmlimage prperty ,

v17.3.4001 [4/16/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.5000 [4/20/24]

• updated package to reflect the version ^17.3.5 of @angular/core package

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> = {}) { }
}

,

v17.3.5110 [5/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.6000 [5/1/24]

• updated package to reflect the version ^17.3.6 of @angular/core package,

v17.3.7000 [5/4/24]

• updated package to reflect the version ^17.3.7 of @angular/core package,

v17.3.7000 [5/9/24]

• updated package to reflect the version ^17.3.7 of @angular/core package,

v17.3.8000 [5/9/24]

• updated package to reflect the version ^17.3.8 of @angular/core package,

v17.3.9000 [5/16/24]

• updated package to reflect the version ^17.3.9 of @angular/core package,

v18.0.0 [5/22/24]

• updated package to reflect the version ^18.0.0 of @angular/core package,

v18.0.1 [5/22/24]

• updated package to reflect the version ^18.0.0 of @angular/core package

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() ,

v18.0.4 [5/25/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.1000 [5/29/24]

• updated package to reflect the version ^18.0.1 of @angular/core package ,

v18.0.2000 [6/6/24]

• updated package to reflect the version ^18.0.2 of @angular/core package,

v18.0.3000 [6/13/24]

• updated package to reflect the version ^18.0.3 of @angular/core package,

v18.0.3000 [6/13/24]

• updated package to reflect the version ^18.0.3 of @angular/core package,

v18.0.3000 [6/13/24]

• updated package to reflect the version ^18.0.3 of @angular/core package

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. ,

v18.0.3010 [6/18/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.3010 [6/18/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4010 [6/23/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4000 [6/23/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4000 [6/23/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.5000 [6/26/24]

• updated package to reflect the version ^18.0.5 of @angular/core package,

v18.0.6000 [7/5/24]

• updated package to reflect the version ^18.0.6 of @angular/core package,

v18.1.0 [7/10/24]

• updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.0 [7/13/24]

• updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.3000 [7/13/24]

• updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.3 [7/13/24]

• updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.4 [7/13/24]

• updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.4 [7/13/24]

• updated package to reflect the version ^18.1.0 of @angular/core package

v18.1.6 [7/14/24]

• [FIX] fixed an error with WMLConstructorDecorator where WMLInit was not being called ,

v18.1.6 [7/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.6 [7/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.1000 [7/18/24]

• updated package to reflect the version ^18.1.1 of @angular/core package,

v18.1.2000 [7/24/24]

• updated package to reflect the version ^18.1.2 of @angular/core package

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 ,

v18.1.2230 [7/27/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.2300 [7/27/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.2301 [7/30/24]

• updated package to conform with @windmillcode/angular-wml-components-base

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 "" ,

v18.1.3000-beta0 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta1 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta2 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta3 [8/1/24]

• updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta4 [8/1/24]

v18.1.3000-beta13 [8/4/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001 [8/4/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001 [8/4/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/4/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3004 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3005 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3006 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3007 [8/5/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4000 [8/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4001 [8/14/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.0 [8/15/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1 [8/20/24]

• [BREAKING CHANGE] removed WMLButton and WMLButton2 use WMLButtonOneProps for WMLButton and WMLButtonZeroProps for WMLButton2

v18.2.1 [8/20/24]

• updated package to reflect the version 18.2.0 of @angular/core package

v18.2.1 [8/20/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1000 [8/22/24]

• updated package to reflect the version 18.2.1 of @angular/core package

v18.2.2000 [8/30/24]

• updated package to reflect the version 18.2.2 of @angular/core package

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.

v18.2.2101 [9/1/2024]

[UPDATE] IF WMLAnimateUIProperty.keyFrameName is left out an internal one is generated

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

v18.2.2200 [9/3/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3000 [9/4/24]

• updated package to reflect the version 18.2.3 of @angular/core package

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

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.

v18.2.3110 [9/10/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3110 [9/10/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3111 [9/10/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3112 [9/10/24]

• updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3200 [9/16/24]

• [UPDATE] added css transitions and pause & play functionaity to WMLMotionUIProperty
• updated package to conform with @windmillcode/wml-components-base

v18.2.4000 [9/16/24]

• updated package to reflect the version 18.2.4 of @angular/core package

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

v18.2.4200 [9/21/24]

• [BREAKING CHANGE] - chaned spelling error from injectKeyframes to injectKeyFrames IN WMLMotionUIProperty

v18.2.4200 [9/21/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.5001 [9/22/24]

• updated package to reflect the version 18.2.5 of @angular/core package

v18.2.6000 [10/1/24]

• updated package to reflect the version 18.2.6 of @angular/core package

v18.2.7000 [10/2/24]

• updated package to reflect the version 18.2.7 of @angular/core package

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.

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.

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.

v18.2.8000 [10/10/24]

• updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8000 [10/11/24]

• updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

• updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.0 [11/19/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.3 [11/20/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/26/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.1000 [11/26/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.2000 [12/4/24]

• updated package to reflect the version 19.0.2 of @angular/core package

v19.0.3000 [12/6/24]

• updated package to reflect the version 19.0.3 of @angular/core package

v19.0.4000 [12/12/24]

• updated package to reflect the version 19.0.4 of @angular/core package

v19.0.5000 [12/19/24]

• updated package to reflect the version 19.0.5 of @angular/core package

v19.0.5001 [12/28/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.5100 [12/29/24]

• [MAJOR UPDATE] updated packge to support SSR enviroments ensured that library was compatible with SSR by providing global objects WML_WINDOW ,WML_DOCUMENT for browser global objects window and document

v19.0.5100 [12/29/24]

• updated package to conform with @windmillcode/wml-components-base

v19.0.6000 [1/12/25]

• updated package to reflect the version 19.0.6 of @angular/core package

v19.0.7000 [1/16/25]

• updated package to reflect the version 19.0.7 of @angular/core package

v19.1.0 [1/17/25]

• updated package to reflect the version 19.1.0 of @angular/core package

v19.1.1000 [1/17/25]

• updated package to reflect the version 19.1.1 of @angular/core package

v19.1.2000 [1/23/25]

• updated package to reflect the version 19.1.2 of @angular/core package

v19.1.3000 [1/23/25]

• updated package to reflect the version 19.1.3 of @angular/core package

v19.1.3100 [1/23/25]

• update package to support the react native ecosystem

v19.1.3111 [1/27/2025 10:15:00 AM EST]

• [UPDATE] Added the WMLStringObject class. This class includes utility methods like camelCase, classify, capitalize, dasherize, lowercase, pascalCase, upperCase, and titleCase for manipulating strings. Developers can now import and use these in their projects.

v19.1.3112 [1/28/2025 2:15:00 PM EST]

• [UPDATE] Added snakeCase method to WMLStringObject

v19.1.3112 [1/28/25]

• updated package to conform with @windmillcode/wml-components-base

v19.1.4000 [1/31/25]

• updated package to reflect the version 19.1.4 of @angular/core package

v19.1.5000 [2/8/25]

• updated package to reflect the version 19.1.5 of @angular/core package

v19.1.6000 [2/12/25]

• updated package to reflect the version 19.1.6 of @angular/core package

v19.1.7000 [2/21/25]

• updated package to reflect the version 19.1.7 of @angular/core package

v19.1.8000 [3/4/25]

• updated package to reflect the version 19.1.8 of @angular/core package

v19.2.0 [3/4/25]

• updated package to reflect the version 19.2.0 of @angular/core package

v19.2.1000 [3/9/25]

• updated package to reflect the version 19.2.1 of @angular/core package

v19.2.2000 [3/15/25]

• updated package to reflect the version 19.2.2 of @angular/core package

v19.2.3000 [3/21/25]

• updated package to reflect the version 19.2.3 of @angular/core package

v19.2.4000 [3/27/25]

• updated package to reflect the version 19.2.4 of @angular/core package

v19.2.5000 [4/3/25]

• updated package to reflect the version 19.2.5 of @angular/core package

v19.2.5001 [4/6/25]

• [UPDATE] deprecated WMLAPIPaginationRequestModel and WMLAPIPaginationResponseModel in favor of WMLPageRequestModel and WMLAPIPageResponseModel

v19.2.5100 [4/10/25]

• [BREAKING CHANGE] Changed default pageSize from 0 to 5 in WMLAPIPageResponseModel - affects all pagination instances that don’t explicitly set pageSize
• changed logic of functions in WMLAPIPageResponseModel investigate and modify your code as necessary

v19.2.6000 [4/10/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.7000 [4/21/25]

• updated package to conform with @windmillcode/wml-components-base

v19.2.8000 [4/24/25]

• updated package to reflect the version 19.2.8 of @angular/core package

v19.2.9000 [5/1/25]

• updated package to reflect the version 19.2.9 of @angular/core package

v19.2.10000 [5/8/25]

• updated package to reflect the version 19.2.10 of @angular/core package