WML Components Base

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

Installation

Section titled “Installation”Terminal window npm install -s --verbose @windmillcode/wml-components-base

Usage

Section titled “Usage”

WMLUIProperty

Section titled “WMLUIProperty”The Building Blocks Of Web Apps

WMLMotionUIProperty

Section titled “WMLMotionUIProperty”Using CSS Animations

if you want a different animation for you animation states simply use a different keyframe mabye suffixing the keyframes with open and close for organizationPause 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

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

WMLCustomComponent

Section titled “WMLCustomComponent”Custom Components

References

Section titled “References”

WMLUIProperty

Section titled “WMLUIProperty”PropertyTypeDescriptionisPresentbooleanIndicates if the UI property is currently present.valueanyThe value associated with this UI property.textstringThe text associated with this property.classstringCSS class string for the property.stylePartial<CSSStyleDeclaration>Inline styles for the property.typeanyThe type of UI element (optional).click(evt?: Event) => voidFunction to handle click events.idstringUnique identifier for the UI property.

Methods

Section titled “Methods”MethodDescriptionupdateClassStringUpdates the class string based on the current state.toggleClassStringToggles a class string on or off.

WMLUIGlobal

Section titled “WMLUIGlobal”PropertyTypeDescriptionframeworkFrameworkHolds the detected framework information.

framework

Section titled “framework”PropertyTypeDescriptionnameWMLUIFrameworkTypeThe name of the detected UI framework.

WMLEndpoint

Section titled “WMLEndpoint”PropertyTypeDescriptionurlFunctionFunction that defines the endpoint’s URL.automatebooleanIndicates whether to automate API requests for the endpoint.

WMLUri

Section titled “WMLUri”PropertyTypeDescriptionurlURLStores the constructed URL object based on provided properties.

Methods

Section titled “Methods”NameSignatureDescriptiondomainget domain(): stringRetrieves the domain, including port if present.fqdnget fqdn(): stringReturns the fully qualified domain name (FQDN).toStringtoString(): stringConverts the URL object to a string.

WMLUri Constructor Parameters

Section titled “WMLUri Constructor Parameters”NameTypeDescriptionschemestringOptional, defaults to "https".hoststringRequired, specifies the host name.portnumberOptional, specifies the port.pathstringOptional, specifies the path.querystringOptional, specifies the query.fragmentstringOptional, specifies the fragment.

WMLView

Section titled “WMLView”PropertyTypeDescriptionangularanyObject containing Angular-specific properties like cdref.cdrefanyAngular’s ChangeDetectorRef, used for detecting changes in Angular applications (deprecated).

Methods

Section titled “Methods”MethodDescriptionget cdrefRetrieves the ChangeDetectorRef from the Angular-specific properties (deprecated).set cdrefSets the ChangeDetectorRef in the Angular-specific properties (deprecated).

angular

Section titled “angular”PropertyTypeDescriptioncdrefanyAngular’s ChangeDetectorRef used for change detection in Angular applications.

WMLRoute

Section titled “WMLRoute”PropertyTypeDescriptionroutestringDefines the route for the application, default is ”/”.linkstringOptional link associated with the route.routerLinkstringOptional router link for navigation.

WMLMotionUIProperty

Section titled “WMLMotionUIProperty”PropertyTypeDescriptionautoOpenbooleanAutomatically opens the UI element when true.helperStylesPartial<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.keyFrameNamestringName of the unique animation keyframe or unique css transition class .motionState"open" | "opening" | "closing" | "closed"Current state of the motion .motionEndEventanyFunction called at the end of an motion state.motionKeyFrameEventanyFunction called at specific keyframes during the motion.currentTransitionInfoanyInformation 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

Section titled “Methods”MethodSignatureReturn TypeDescriptionget keyFrameNamekeyFrameName: stringstringRetrieves the current keyframe name used for the animation.set keyFrameNamekeyFrameName(name: string): voidvoidSets a unique keyframe name for the motion animation.getGroupMotionStategetGroupMotionState(): WMLMotionUIPropertyStateWMLMotionUIPropertyStateReturns the current motion state of the animation group.motionEndEventmotionEndEvent(state: WMLMotionUIPropertyState): voidvoidFunction called at the end of an animation state.triggerMotionEndEventtriggerMotionEndEvent(motionState?: WMLMotionUIPropertyState): voidvoidTriggers the motion end event with an optional motion state.motionKeyFrameEventmotionKeyFrameEvent(keyFrame: string): voidvoidFunction called at specific keyframes during transition animations.triggerMotionKeyFrameEventtriggerMotionKeyFrameEvent(keyFrame?: string): voidvoidTriggers the motion keyframe event with an optional keyframe.animationEndanimationEnd(evt?: AnimationEvent): voidvoidHandles the animation end event and updates the motion state accordingly.transitionEndtransitionEnd(evt?: TransitionEvent): voidvoidHandles the transition end event and updates the motion state accordingly.openMotionopenMotion(): voidvoidTriggers the opening animation.closeMotioncloseMotion(): voidvoidTriggers the closing animation.pauseMotionpauseMotion(): voidvoidPauses the current motion animation or transition.resumeMotionresumeMotion(): voidvoidResumes the motion animation or transition if it was paused.injectKeyFramesinjectKeyFrames(): voidvoidInjects custom keyframes for the motion animation into the document’s styles.updateKeyFramesupdateKeyFrames(props:WMLMotionUIProperty["keyFrameStyles"]): voidvoidInjects custom keyframes for the motion animation into the document’s styles.createKeyFrameNamecreateKeyFrameName(): voidvoidCreates a unique keyframe name for the motion animation.checkForDuplicateKeyFrameNamescheckForDuplicateKeyFrameNames(): booleanbooleanChecks for duplicate keyframe names and returns true if a duplicate is found.setupTransitionssetupTransitions(): voidvoidSets up transitions for motion when using the "transition" type.getElementgetElement(): ElementElementReturns the HTML element associated with this motion property.getTransitionPropertiesgetTransitionProperties(): anyanyRetrieves the transition properties of the element.

currentTransitionInfo Section titled “currentTransitionInfo”PropertyTypeDescriptionkeyframestringCurrent keyframe percentage (e.g., "0%").currentStylesobjectCurrent styles applied to the element.transitionEndStylesArray<string>List of CSS properties that have completed transitioning.playStatestringCurrent play state of the transition (e.g., "running", "paused").

WMLMotionUIPropertyState

Section titled “WMLMotionUIPropertyState”ValueDescriptionopenThe UI element is fully open.openingThe UI element is in the process of opening.closingThe UI element is in the process of closing.closedThe UI element is fully closed.

WMLCustomComponent

Section titled “WMLCustomComponent”PropertyTypeDescriptioncpntCThe custom component being wrapped.propsPProperties associated with the custom component.

WMLImage<V=any,T=any>

Section titled “WMLImage<V=any,T=any>”PropertyTypeDescriptionsrcstringSource URL for the image.altstringAlt text for accessibility purposes.ariaLabelstringARIA label for screen readers.ariaExpandedbooleanIndicates whether the image is in an expanded state. Default is false.

Methods

Section titled “Methods”NameSignatureDescriptiononError(event?: any) => voidHandles the error event when loading the image.

WMLE2ETarget

Section titled “WMLE2ETarget”PropertyTypeDescriptionrunningONE2EbooleanIndicates if an E2E (end-to-end) test is currently running.dataanyData associated with the E2E test.

WMLQueue

Section titled “WMLQueue”PropertyTypeDescriptionqueueT[]Internal array representing the queue of items.

Methods

Section titled “Methods”MethodDescriptionenqueue(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

Section titled “WMLAPIPageRequestModelFilterPredicateEnum”PropertyTypeDescriptionEQUALSstringFilter predicate to check if a value is equal.STARTSWITHstringFilter predicate to check if a value starts with a string.ENDSWITHstringFilter predicate to check if a value ends with a string.CONTAINSstringFilter predicate to check if a value contains a string.

WMLAPIPaginationRequestModel

Section titled “WMLAPIPaginationRequestModel”PropertyTypeDescriptionfieldsArray<{ value: any }>Array of fields included in the request.filterArray<{ key: string, value: any, predicate?: WMLAPIPageRequestModelFilterPredicateEnum }>Filter criteria with optional predicates.sortArray<{ key: string, direction: "ASC" | "DESC" | "" }>Sorting criteria for the request.cursor{ value?: string, order?: number }Cursor-based pagination options.pageNumnumberCurrent page number in the pagination request.pageSizenumberNumber of items per page.errorOccuredIsPresentbooleanIndicates if an error occurred during the request.

Methods

Section titled “Methods”MethodDescriptiongetIndexInfo()Returns start and end index information for the current page.

WMLAPIPaginationResponseModel

Section titled “WMLAPIPaginationResponseModel”PropertyTypeDescriptioncolumnsArray<{ value: string, type?: string }>Array of columns in the response data.dataArray<any>Array of data returned by the API.metadata{ startOrderValue?: number }Metadata about the response, including start order values.pageNumnumberCurrent page number in the response.pageSizenumberNumber of items per page in the response.totalPagesnumberTotal number of pages in the response.totalItemsnumberTotal number of items in the response.

Methods

Section titled “Methods”MethodDescriptiongetIndexInfo()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.

Types

Section titled “Types”

WMLDeepPartial

Section titled “WMLDeepPartial”DescriptionWMLDeepPartial<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”ConditionBehaviorT[K] is a functionKeeps the function type intact.T[K] is an objectRecursively makes all properties of the object optional using WMLDeepPartial.T[K] is neither a function nor objectThe property becomes optional.

Functions

Section titled “Functions”

updateGlobal

Section titled “updateGlobal”SignatureReturn TypeDescriptionupdateGlobal(props: WMLDeepPartial<WMLUIGlobal & { propFrameworkName?: string }>)voidUpdates the global WINDMILLCODE object with provided properties and optionally changes framework name. useful if detectframework gets the framework name wrong

props Section titled “props”PropertyTypeDescriptionpropFrameworkNamestring (optional)Optionally updates the framework name in the global object.…restWMLDeepPartial<WMLUIGlobal>All other properties of WMLUIGlobal to be applied globally.

getGlobalObject

Section titled “getGlobalObject”SignatureReturn TypeDescriptiongetGlobalObject(): anyanyReturns the appropriate global object based on the environment: globalThis, window, global, or self.

Return Object Section titled “Return Object”PropertyTypeDescriptionglobalThisanyStandard ECMAScript global object.windowanyGlobal object for browser environments.globalanyGlobal object for Node.js environments.selfanyGlobal object for Web Workers.ObjectFallback empty object if none of the above globals are available.

detectFramework

Section titled “detectFramework”SignatureReturn TypeDescriptiondetectFramework(): WMLUIFrameworkTypeWMLUIFrameworkTypeDetects the framework used in the environment (React, Angular, Vue.js, etc.).

myWindow Section titled “myWindow”PropertyTypeDescriptionmyWindowanyRepresents the global window object or an empty object if window is undefined.

generateUUID(prefix: string)

Section titled “generateUUID(prefix: string)”DescriptionGenerates a UUID with an optional prefix and returns it as a string.

generateClassPrefix(prefix: string)

Section titled “generateClassPrefix(prefix: string)”DescriptionReturns 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)

Section titled “generateIdPrefix(prefix: string)”DescriptionReturns 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)

Section titled “fillMissingProperties(source: object, target: object)”DescriptionRecursively 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)

Section titled “updateClassString(obj: any, myClassDefault: string, classListDefault: string)”DescriptionReturns 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)

Section titled “toggleClassString(targetClass: string, classList: Array, predicate: Function)”DescriptionToggles a class string on or off within the provided class list. The predicate function determines the action.

generateRandomNumber(range: number, additional: number)

Section titled “generateRandomNumber(range: number, additional: number)”DescriptionGenerates a random number within the specified range and adds the additional value.

generateRandomColor()

Section titled “generateRandomColor()”DescriptionGenerates a random hex color code.

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

Section titled “selectRandomOptionFromArray(myArray: Array, index?: number)”DescriptionSelects 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

Section titled “replaceValuesWithPaths(obj: any, path: string, predicate: Function): T”DescriptionRecursively replaces values in an object with their corresponding path. The predicate function is used to modify the path value.

WMLUIPropertyDecorator(target: any, key: any)

Section titled “WMLUIPropertyDecorator(target: any, key: any)”DescriptionObsolete decorator for handling UI properties.

Changelog

Section titled “Changelog”

v0.9.4

Section titled “v0.9.4”added WMLQueue just a regular Queue data structure thats all

v0.9.5

Section titled “v0.9.5”added index accessing for WMLQueue

v0.10.0

Section titled “v0.10.0”add generateRandomNumber, generateRandomColor,and selectRandomOptionFromArraywml

v0.10.1

Section titled “v0.10.1”returned the ref created by addCustomComponent

v0.10.2

Section titled “v0.10.2”WMLAPIPaginationRequestModel[“sort”][number][“direction”] enums are now “ASC” |“DESC” | ""

v0.10.3

Section titled “v0.10.3”add WMLAPIPaginationResponseModel[“columns”] of type

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

to provide the developer column information

v0.10.4

Section titled “v0.10.4”made WMLAPIPaginationResponseModel[“data”] Array generic

v0.10.5

Section titled “v0.10.5”added generateClassPrefix method to functions

v0.10.6

Section titled “v0.10.6”updated Function signatuire on WMLUIProperty##click so the event option is optional

v0.11.0

Section titled “v0.11.0”provided WMLNGXTranslateLoader to work with ngx-translateprovided WMLModuleForRootProps to work with

v0.11.1

Section titled “v0.11.1”attempting to deal with an issue where numbers are being returned if no feature is present

v1.0.0

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

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

v2.0.0

Section titled “v2.0.0”MAJOR rename to angular-wml-components-base

v2.1.1

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

v2.1.2

Section titled “v2.1.2”made a fix in genearate random color, where some times 5 digits where returned

v2.2.0

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

v2.2.3

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

v16.2.5-0

Section titled “v16.2.5-0”provided access to WMLOptionsProps to the the container cpnt

v16.2.70

Section titled “v16.2.70”wmlapipaginationrequestmodel##filter[].value is now the any type %!(EXTRA string=

v16.2.80

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package

v16.2.92

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, }); }

tsconfig.spec.json... "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ "jasmine","node" ], "module": "commonjs" },...

v16.2.93

Section titled “v16.2.93”added mockDeclarations to wmltestutils so users can add their declarations ,

v16.2.93

Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.100

Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.110

Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features

v16.2.112

Section titled “v16.2.112”update type inference for replaceValuesWithPaths to be more friendly

v16.2.113

Section titled “v16.2.113”added createBasicObservableError and WMLTestHttpHandler for interceptor test cases and throwing observable errors ,

v16.2.120

Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.10

Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.11

Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.20

Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package

v17.0.21

Section titled “v17.0.21”added data-source-utils.ts to help with pagination and data source logic ,

v17.0.40

Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

Section titled “v17.0.60”updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package

v17.0.7300

Section titled “v17.0.7300”added WMLAnimateUIProperty as the basis for all entities meant to be animated,

v17.0.7300

Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8300

Section titled “v17.0.8300”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7300

Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.80

Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package

v17.0.8100

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

v17.0.8100

Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base

v17.0.8102

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 ,

v17.0.8103

Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9000

Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base

v17.0.9001

Section titled “v17.0.9001”added generateIdPrefix ,

v17.0.9000

Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9001

Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.0000

Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package

v17.1.2

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,

v17.1.2

Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.1000

Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.2000 [2/5/24]

Section titled “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]

Section titled “v17.1.2001 [2/8/24]”added toggle functionality for updateClassString ,

v17.1.2001 [2/8/24]

Section titled “v17.1.2001 [2/8/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.3001 [2/8/24]

Section titled “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]

Section titled “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]

Section titled “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]

Section titled “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]

Section titled “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]

Section titled “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]

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

v17.2.3001 [3/2/24]

Section titled “v17.2.3001 [3/2/24]”updated package to conform with @windmillcode/angular-wml-components-base

v17.2.3002 [3/5/24]

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

v17.2.3002 [3/5/24]

Section titled “v17.2.3002 [3/5/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4000 [3/8/24]

Section titled “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]

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

v17.2.4002 [3/12/24]

Section titled “v17.2.4002 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4003 [3/13/24]

Section titled “v17.2.4003 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4004 [3/13/24]

Section titled “v17.2.4004 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.0 [3/17/24]

Section titled “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]

Section titled “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]

Section titled “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]

Section titled “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]

Section titled “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]

Section titled “v17.3.4001 [4/16/24]”added onError to wmlimage prperty ,

v17.3.4001 [4/16/24]

Section titled “v17.3.4001 [4/16/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.5000 [4/20/24]

Section titled “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]

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<div class="cod