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
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
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
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
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.
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.
Updates the global WINDMILLCODE object with provided properties and optionally changes framework name. useful if detectframework gets the framework name wrong
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
[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
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.
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.
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.
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.
,
[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.
,
[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.
[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]) => {
[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.
,
[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
,
[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.
[BREAKING CHANGE] WMLAnimateUIProperty is now WMLMotionUIProperty and anywhere you see animate on the class (careful not to confuse with css) change to motion
[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
[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.
[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
[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.
[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.
[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.
[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
[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.
[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