simpo-component-library 0.0.2 → 0.0.3

package/esm2022/public-api.mjs

@@ -16,10 +16,33 @@ export * from './lib/sections/testimonial-section/testimonial-section.component'
 export * from './lib/sections/text-image-section/text-image-section.component';
 export * from './lib/sections/video-section/video-section.component';
 export * from './lib/sections/navbar-section/navbar-section.component';
-// export * from './lib/directive/index';
+export * from './lib/directive/animation-directive';
+export * from './lib/directive/background-directive';
+export * from './lib/directive/banner-content-fit-directive';
+export * from './lib/directive/border-directive';
+export * from './lib/directive/button-directive.directive';
+export * from './lib/directive/column-directive.directive';
+export * from './lib/directive/container-fir.directive';
+export * from './lib/directive/content-alignment-directive';
+export * from './lib/directive/content-fit-directive';
+export * from './lib/directive/corner-directive';
+export * from './lib/directive/footer-layout-directive';
+export * from './lib/directive/hover-element-directive';
+export * from './lib/directive/image-directive.directive';
+export * from './lib/directive/overlay-directive';
+export * from './lib/directive/position-layout-directive.directive';
+export * from './lib/directive/text-background-directive.directive';
+export * from './lib/elements/below-image-card/below-image-card.component';
+export * from './lib/elements/button/button.component';
+export * from './lib/elements/covering-image-card/covering-image-card.component';
+export * from './lib/elements/heading-element/heading-element.component';
+export * from './lib/elements/simpo-button/simpo-button.component';
+export * from './lib/elements/socia-icons/socia-icons.component';
+export * from './lib/elements/text/text.component';
+export * from './lib/elements/top-of-image-card/top-of-image-card.component';
 // export * from './lib/elements/index';
-export * from './lib/styles/index';
-export * from './lib/styles/style.model';
-export * from './lib/styles/types';
-export * from './lib/services/events.service';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsMENBQTBDO0FBQzFDLDRDQUE0QztBQUU1QyxjQUFjLG9EQUFvRCxDQUFDO0FBQ25FLGNBQWMsd0RBQXdELENBQUM7QUFDdkUsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLHdEQUF3RCxDQUFDO0FBQ3ZFLGNBQWMsd0VBQXdFLENBQUM7QUFDdkYsY0FBYyxnRUFBZ0UsQ0FBQztBQUMvRSxjQUFjLHNEQUFzRCxDQUFDO0FBQ3JFLGNBQWMsMERBQTBELENBQUM7QUFDekUsY0FBYyxrRUFBa0UsQ0FBQztBQUNqRixjQUFjLGtFQUFrRSxDQUFDO0FBQ2pGLGNBQWMsZ0VBQWdFLENBQUM7QUFDL0UsY0FBYyxzREFBc0QsQ0FBQztBQUNyRSxjQUFjLHdEQUF3RCxDQUFDO0FBRXZFLHlDQUF5QztBQUV6Qyx3Q0FBd0M7QUFDeEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYywrQkFBK0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygc2ltcG8tdWlcbiAqL1xuXG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9zaW1wby11aS5zZXJ2aWNlJztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL3NpbXBvLXVpLmNvbXBvbmVudCc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL3RleHQtc2VjdGlvbi90ZXh0LXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL2Jhbm5lci1zZWN0aW9uL2Jhbm5lci1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy9mYXEtc2VjdGlvbi9mYXEtc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvZm9vdGVyLXNlY3Rpb24vZm9vdGVyLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL2ltYWdlLWNhcm91c2VsLXNlY3Rpb24vaW1hZ2UtY2Fyb3VzZWwtc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvaW1hZ2UtZ3JpZC1zZWN0aW9uL2ltYWdlLWdyaWQtc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvaW1hZ2Utc2VjdGlvbi9pbWFnZS1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy9zZXJ2aWNlLXNlY3Rpb24vc2VydmljZS1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy90ZWFtLW1lbWJlci1zZWN0aW9uL3RlYW0tbWVtYmVyLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL3Rlc3RpbW9uaWFsLXNlY3Rpb24vdGVzdGltb25pYWwtc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvdGV4dC1pbWFnZS1zZWN0aW9uL3RleHQtaW1hZ2Utc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvdmlkZW8tc2VjdGlvbi92aWRlby1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy9uYXZiYXItc2VjdGlvbi9uYXZiYXItc2VjdGlvbi5jb21wb25lbnQnO1xuXG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmUvaW5kZXgnO1xuXG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9lbGVtZW50cy9pbmRleCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdHlsZXMvaW5kZXgnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3R5bGVzL3N0eWxlLm1vZGVsJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3N0eWxlcy90eXBlcyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZXJ2aWNlcy9ldmVudHMuc2VydmljZSc7XG5cbiJdfQ==
+// export * from './lib/styles/index';
+// export * from './lib/styles/style.model';
+// export * from './lib/styles/types';
+// export * from './lib/services/events.service';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsMENBQTBDO0FBQzFDLDRDQUE0QztBQUU1QyxjQUFjLG9EQUFvRCxDQUFDO0FBQ25FLGNBQWMsd0RBQXdELENBQUM7QUFDdkUsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLHdEQUF3RCxDQUFDO0FBQ3ZFLGNBQWMsd0VBQXdFLENBQUM7QUFDdkYsY0FBYyxnRUFBZ0UsQ0FBQztBQUMvRSxjQUFjLHNEQUFzRCxDQUFDO0FBQ3JFLGNBQWMsMERBQTBELENBQUM7QUFDekUsY0FBYyxrRUFBa0UsQ0FBQztBQUNqRixjQUFjLGtFQUFrRSxDQUFDO0FBQ2pGLGNBQWMsZ0VBQWdFLENBQUM7QUFDL0UsY0FBYyxzREFBc0QsQ0FBQztBQUNyRSxjQUFjLHdEQUF3RCxDQUFDO0FBRXZFLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLDRDQUE0QyxDQUFDO0FBQzNELGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyx5Q0FBeUMsQ0FBQztBQUN4RCxjQUFjLHlDQUF5QyxDQUFDO0FBQ3hELGNBQWMsMkNBQTJDLENBQUM7QUFDMUQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLHFEQUFxRCxDQUFDO0FBQ3BFLGNBQWMscURBQXFELENBQUM7QUFHcEUsY0FBYyw0REFBNEQsQ0FBQztBQUMzRSxjQUFjLHdDQUF3QyxDQUFDO0FBQ3ZELGNBQWMsa0VBQWtFLENBQUM7QUFDakYsY0FBYywwREFBMEQsQ0FBQztBQUN6RSxjQUFjLG9EQUFvRCxDQUFDO0FBQ25FLGNBQWMsa0RBQWtELENBQUM7QUFDakUsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLDhEQUE4RCxDQUFDO0FBQzdFLHdDQUF3QztBQUN4QyxzQ0FBc0M7QUFDdEMsNENBQTRDO0FBQzVDLHNDQUFzQztBQUN0QyxpREFBaUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHNpbXBvLXVpXG4gKi9cblxuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvc2ltcG8tdWkuc2VydmljZSc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9zaW1wby11aS5jb21wb25lbnQnO1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy90ZXh0LXNlY3Rpb24vdGV4dC1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy9iYW5uZXItc2VjdGlvbi9iYW5uZXItc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvZmFxLXNlY3Rpb24vZmFxLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL2Zvb3Rlci1zZWN0aW9uL2Zvb3Rlci1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy9pbWFnZS1jYXJvdXNlbC1zZWN0aW9uL2ltYWdlLWNhcm91c2VsLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL2ltYWdlLWdyaWQtc2VjdGlvbi9pbWFnZS1ncmlkLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL2ltYWdlLXNlY3Rpb24vaW1hZ2Utc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvc2VydmljZS1zZWN0aW9uL3NlcnZpY2Utc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvdGVhbS1tZW1iZXItc2VjdGlvbi90ZWFtLW1lbWJlci1zZWN0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWN0aW9ucy90ZXN0aW1vbmlhbC1zZWN0aW9uL3Rlc3RpbW9uaWFsLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL3RleHQtaW1hZ2Utc2VjdGlvbi90ZXh0LWltYWdlLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlY3Rpb25zL3ZpZGVvLXNlY3Rpb24vdmlkZW8tc2VjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VjdGlvbnMvbmF2YmFyLXNlY3Rpb24vbmF2YmFyLXNlY3Rpb24uY29tcG9uZW50JztcblxuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL2FuaW1hdGlvbi1kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL2JhY2tncm91bmQtZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9iYW5uZXItY29udGVudC1maXQtZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9ib3JkZXItZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9idXR0b24tZGlyZWN0aXZlLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmUvY29sdW1uLWRpcmVjdGl2ZS5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL2NvbnRhaW5lci1maXIuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9jb250ZW50LWFsaWdubWVudC1kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL2NvbnRlbnQtZml0LWRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmUvY29ybmVyLWRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmUvZm9vdGVyLWxheW91dC1kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL2hvdmVyLWVsZW1lbnQtZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9pbWFnZS1kaXJlY3RpdmUuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9vdmVybGF5LWRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmUvcG9zaXRpb24tbGF5b3V0LWRpcmVjdGl2ZS5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL3RleHQtYmFja2dyb3VuZC1kaXJlY3RpdmUuZGlyZWN0aXZlJztcblxuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9lbGVtZW50cy9iZWxvdy1pbWFnZS1jYXJkL2JlbG93LWltYWdlLWNhcmQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VsZW1lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VsZW1lbnRzL2NvdmVyaW5nLWltYWdlLWNhcmQvY292ZXJpbmctaW1hZ2UtY2FyZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZWxlbWVudHMvaGVhZGluZy1lbGVtZW50L2hlYWRpbmctZWxlbWVudC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZWxlbWVudHMvc2ltcG8tYnV0dG9uL3NpbXBvLWJ1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZWxlbWVudHMvc29jaWEtaWNvbnMvc29jaWEtaWNvbnMuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VsZW1lbnRzL3RleHQvdGV4dC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZWxlbWVudHMvdG9wLW9mLWltYWdlLWNhcmQvdG9wLW9mLWltYWdlLWNhcmQuY29tcG9uZW50Jztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL2VsZW1lbnRzL2luZGV4Jztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL3N0eWxlcy9pbmRleCc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9zdHlsZXMvc3R5bGUubW9kZWwnO1xuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvc3R5bGVzL3R5cGVzJztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL3NlcnZpY2VzL2V2ZW50cy5zZXJ2aWNlJztcblxuXG4iXX0=

package/fesm2022/simpo-component-library.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, Output, HostListener, Component, ViewChild, Injectable } from '@angular/core';
+import { Directive, Input, EventEmitter, Output, HostListener, Component, ViewChild } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { StyleDirectivesModule } from '@simpo-ui/directive';
 import { SimpoElementsModule } from '@simpo-ui/elements';
@@ -10,7 +10,7 @@ import * as i1$1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import { SimpoButtonComponent as SimpoButtonComponent$1 } from '@simpo-ui/elements/simpo-button/simpo-button.component';
 import * as i1 from '@simpo-ui/services/events.service';
-import { ButtonDirectiveDirective } from '@simpo-ui/directive/button-directive.directive';
+import { ButtonDirectiveDirective as ButtonDirectiveDirective$1 } from '@simpo-ui/directive/button-directive.directive';
 import { MatIconModule } from '@angular/material/icon';
 import { ImageFit as ImageFit$1, ImageRatio as ImageRatio$1, contentAlignment as contentAlignment$1, AlignContent as AlignContent$1, BANNERALIGNMENT as BANNERALIGNMENT$1, FooterTypes as FooterTypes$1, TextPosition as TextPosition$1 } from '@simpo-ui/styles';
 import { ContentFitDirective as ContentFitDirective$1 } from '@simpo-ui/directive/content-fit-directive';
@@ -18,8 +18,10 @@ import { SociaIconsComponent as SociaIconsComponent$1 } from '@simpo-ui/elements
 import { ColumnDirectiveDirective as ColumnDirectiveDirective$1 } from '@simpo-ui/directive/column-directive.directive';
 import { ImageDirectiveDirective as ImageDirectiveDirective$1 } from '@simpo-ui/directive/image-directive.directive';
 import { CornerDirective as CornerDirective$1 } from '@simpo-ui/directive/corner-directive';
-import { TextBackgroundDirectiveDirective } from '@simpo-ui/directive/text-background-directive.directive';
+import { TextBackgroundDirectiveDirective as TextBackgroundDirectiveDirective$1 } from '@simpo-ui/directive/text-background-directive.directive';
 import * as i1$2 from '@angular/platform-browser';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -516,11 +518,11 @@ class SimpoButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective$1, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective$1], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
         }], propDecorators: { buttonContent: [{
                 type: Input
             }], buttonStyle: [{
@@ -1130,11 +1132,11 @@ class TopOfImageCardComponent {
         console.log(this.button);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective$1, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"] }]
+            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective$1, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -1154,11 +1156,11 @@ class CoveringImageCardComponent {
         // }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective$1, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
+            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective$1, SimpoButtonComponent], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -1458,48 +1460,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
-class EventsService {
-    constructor() {
-        this.editSection = new EventEmitter();
-        this.duplicate = new EventEmitter();
-        this.delete = new EventEmitter();
-        //reference services
-        this.backgroundImageChangeCheck = new EventEmitter();
-        this.colorOverlayChangeChecks = new EventEmitter();
-        this.alignmentChangeChecks = new EventEmitter();
-        this.animationChangeChecks = new EventEmitter();
-        this.spacingChangeChecks = new EventEmitter();
-        this.borderChangeChecks = new EventEmitter();
-        this.cardSizeChangeChecks = new EventEmitter();
-        this.imageStyleChangeChecks = new EventEmitter();
-        this.cornerChangeChecks = new EventEmitter();
-        this.textBackgroundChangeChecks = new EventEmitter();
-        this.buttonStyleChangeChecks = new EventEmitter();
-        this.postionLayoutChangeChecks = new EventEmitter();
-        this.contentAlignmentChangeCheck = new EventEmitter();
-        this.addNewSectionClick = new EventEmitter();
-        this.regenerateSection = new EventEmitter();
-        this.changeContent = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: EventsService, providedIn: 'root' }); }
+class BannerContentFitDirective {
+    constructor(el, eventService, renderer) {
+        this.el = el;
+        this.eventService = eventService;
+        this.renderer = renderer;
+        this.eventService.alignmentChangeChecks.subscribe((res) => {
+            if (this.layout?.bannerImageDisplay) {
+                Object.entries(BANNERALIGNMENT).forEach(([className, classValue]) => {
+                    if (res.data?.align === className) {
+                        this.renderer.addClass(this.el.nativeElement, classValue);
+                        if (res.data?.align == 'top' || res.data?.align == 'bottom') {
+                            this.el.nativeElement.style.setProperty('text-align', "center");
+                        }
+                    }
+                });
+            }
+            else {
+                Object.entries(BANNERHALIGN).forEach(([className, classValue]) => {
+                    if (res.data?.layoutAlignment?.value === className) {
+                        this.renderer.addClass(this.el.nativeElement, `flex-lg-row`);
+                        classValue.split(" ").forEach(element => {
+                            this.renderer.addClass(this.el.nativeElement, element);
+                        });
+                    }
+                });
+            }
+            applySpacing(this.el.nativeElement, this.layout?.spacing);
+        });
+        this.eventService.spacingChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.type) {
+                if (this.layout?.fit === 'content') {
+                    fitContent(this.el.nativeElement);
+                }
+                else {
+                    fitScreen(this.el.nativeElement);
+                }
+                applySpacing(this.el.nativeElement, res.data.spacing);
+            }
+        });
+    }
+    ngOnInit() {
+        this.appply();
+    }
+    ngOnChanges() {
+        this.appply();
+    }
+    appply() {
+        if (this.layout?.fit === 'content') {
+            fitContent(this.el.nativeElement);
+        }
+        else {
+            fitScreen(this.el.nativeElement);
+        }
+        if (this.layout?.bannerImageDisplay) {
+            Object.entries(BANNERALIGNMENT).forEach(([className, classValue]) => {
+                if (this.layout?.layoutAlignment.value === className) {
+                    this.renderer.addClass(this.el.nativeElement, classValue);
+                    if (this.layout.layoutAlignment.value == 'top' || this.layout.layoutAlignment.value == 'bottom') {
+                        this.el.nativeElement.style.setProperty('text-align', "center");
+                    }
+                }
+            });
+        }
+        else {
+            Object.entries(BANNERHALIGN).forEach(([className, classValue]) => {
+                if (this.layout?.layoutAlignment.value === className) {
+                    this.renderer.addClass(this.el.nativeElement, `flex-lg-row`);
+                    classValue.split(" ").forEach(element => {
+                        this.renderer.addClass(this.el.nativeElement, element);
+                    });
+                }
+            });
+        }
+        applySpacing(this.el.nativeElement, this.layout?.spacing);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerContentFitDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: BannerContentFitDirective, isStandalone: true, selector: "[simpoBannerLayout]", inputs: { layout: ["simpoBannerLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerContentFitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoBannerLayout]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }, { type: i0.Renderer2 }], propDecorators: { layout: [{
+                type: Input,
+                args: ['simpoBannerLayout']
+            }] } });
+
+class ButtonDirectiveDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.buttonStyleChangeCheck();
+    }
+    ngOnChanges() {
+        this.applyButtonStyleChanges();
+    }
+    ngOnDestroy() {
+        this.buttonStyleSubscription?.unsubscribe();
+    }
+    applyButtonStyleChanges() {
+        if (this.buttonStyle?.type) {
+            this.applyButtonType(this.buttonStyle, this.color ? this.color : '#ffffff');
+        }
+        if (this.buttonStyle?.shape) {
+            this.applyButtonShape(this.buttonStyle);
+        }
+    }
+    applyButtonType(style, color) {
+        if (style?.type === 'Solid') {
+            this.el.nativeElement.style.setProperty('background', color);
+            this.el.nativeElement.style.setProperty('color', this.getTextColor(color));
+            this.el.nativeElement.style.setProperty('border', `2px solid ${color} `);
+        }
+        else {
+            this.el.nativeElement.style.setProperty('border', `2px solid ${color}`);
+            this.el.nativeElement.style.setProperty('background', 'transparent');
+            this.el.nativeElement.style.setProperty('color', color);
+        }
+    }
+    applyButtonShape(style) {
+        if (style?.shape === 'Round') {
+            this.el.nativeElement.style.setProperty('border-radius', '5px');
+        }
+        else {
+            this.el.nativeElement.style.setProperty('border-radius', '0px');
+        }
+    }
+    getTextColor(bgColor) {
+        if (bgColor) {
+            const threshold = 130; // Adjust this threshold as needed
+            const r = parseInt(bgColor.slice(1, 3), 16);
+            const g = parseInt(bgColor.slice(3, 5), 16);
+            const b = parseInt(bgColor.slice(5, 7), 16);
+            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+            return brightness > threshold ? '#000000' : '#ffffff';
+        }
+        return "#ffffff;";
+    }
+    buttonStyleChangeCheck() {
+        this.buttonStyleSubscription = this.eventService.buttonStyleChangeChecks.subscribe((res) => {
+            this.changeButtonStyle(res.id, res.buttonStyle, res.color);
+        });
+    }
+    changeButtonStyle(id, style, bgColor) {
+        if (this.el.nativeElement.id === id) {
+            if (style?.type) {
+                this.applyButtonType(style, bgColor ? bgColor : '#ffffff');
+            }
+            if (style?.shape) {
+                this.applyButtonShape(style);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ButtonDirectiveDirective, isStandalone: true, selector: "[simpoButtonDirective]", inputs: { buttonStyle: "buttonStyle", color: "color" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: EventsService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonDirectiveDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    selector: '[simpoButtonDirective]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { buttonStyle: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class TextBackgroundDirectiveDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.textBackgroundChangeCheck();
+    }
+    ngOnChanges() {
+        if (this.textBackgroundDirective) {
+            let opacity = this.textBackgroundDirective?.amount / 100;
+            let rgb = this.getrgbFormColor(this.textBackgroundDirective.color);
+            let backgroundColor = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + ')';
+            if (this.checkColorIsRgbFormOrNot(backgroundColor)) {
+                let rgba = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ')';
+                this.el.nativeElement.style.setProperty('background', rgba);
+                this.el.nativeElement.style.setProperty('color', this.getContrastColorFromRGBA(rgba));
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.textBackgroundSubscription) {
+            this.textBackgroundSubscription.unsubscribe();
+        }
+    }
+    getrgbFormColor(hexCode) {
+        const hexColorRegex = /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        if (hexColorRegex.test(hexCode)) {
+            const r = parseInt(hexCode.slice(1, 3), 16);
+            const g = parseInt(hexCode.slice(3, 5), 16);
+            const b = parseInt(hexCode.slice(5, 7), 16);
+            return { r, g, b };
+        }
+        return hexCode;
+    }
+    checkColorIsRgbFormOrNot(color) {
+        const rgbColorRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
+        return rgbColorRegex.test(color);
+    }
+    textBackgroundChangeCheck() {
+        this.textBackgroundSubscription = this.eventService.textBackgroundChangeChecks.subscribe((res) => {
+            this.changeTextBackground(res.id, res.textBackground);
+        });
+    }
+    changeTextBackground(id, textBackground) {
+        if (this.el.nativeElement.id === id && textBackground) {
+            let opacity = textBackground.amount / 100;
+            let rgb = this.getrgbFormColor(textBackground.color);
+            let backgroundColor = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + ')';
+            if (this.checkColorIsRgbFormOrNot(backgroundColor)) {
+                let rgba = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ')';
+                this.el.nativeElement.style.setProperty('background', rgba);
+                this.el.nativeElement.style.setProperty('color', this.getContrastColorFromRGBA(rgba));
+            }
+        }
+    }
+    getContrastColorFromRGBA(rgbaString) {
+        // Extract RGBA values from the RGBA string
+        const rgbaValues = this.extractRGBA(rgbaString);
+        if (rgbaValues) {
+            // Get contrast color based on RGBA values
+            return this.getContrastColor(rgbaValues);
+        }
+        // Return null if extraction failed
+        return null;
+    }
+    // Function to extract RGBA values from RGBA string
+    extractRGBA(rgbaString) {
+        // Regular expression to match RGBA values
+        const rgbaRegex = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*(?:\.\d+)?)?\)/;
+        // Match the RGBA string against the regex
+        const match = rgbaString.match(rgbaRegex);
+        if (match) {
+            // Extract RGBA values from the regex groups
+            const [, r, g, b, a] = match.map(parseFloat);
+            // If alpha (a) is not provided, set it to 1
+            const alpha = typeof a === 'undefined' ? 1 : a;
+            // Return the RGBA values as an array
+            return [r, g, b, alpha];
+        }
+        // Return null if no match found
+        return null;
+    }
+    // Function to calculate contrast color based on RGBA values
+    getContrastColor(rgba) {
+        // Extract RGB values from the RGBA color
+        const [r, g, b, a] = rgba;
+        // Convert RGB values to luminance
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        // Determine threshold for color selection
+        const threshold = 0.5;
+        // Choose contrasting color based on luminance
+        return luminance > threshold ? 'black' : 'white';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextBackgroundDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: TextBackgroundDirectiveDirective, isStandalone: true, selector: "[simpoTextBackgroundDirective]", inputs: { textBackgroundDirective: ["simpoTextBackgroundDirective", "textBackgroundDirective"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextBackgroundDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoTextBackgroundDirective]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { textBackgroundDirective: [{
+                type: Input,
+                args: ['simpoTextBackgroundDirective']
+            }] } });
+
+class ButtonElementComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n" }]
+        }], propDecorators: { buttonData: [{
+                type: Input
+            }] } });
 
 /*
  * Public API Surface of simpo-ui
  */
 // export * from './lib/simpo-ui.service';
 // export * from './lib/simpo-ui.component';
+// export * from './lib/elements/index';
+// export * from './lib/styles/index';
+// export * from './lib/styles/style.model';
+// export * from './lib/styles/types';
+// export * from './lib/services/events.service';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AlignContent, BANNERALIGNMENT, BANNERHALIGN, BannerSectionComponent, ChannelType, Corners, EventsService, FaqSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, ImageCarouselSectionComponent, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, NavbarSectionComponent, Padding, RedirectionLinkType, SPACING, ServiceSectionComponent, Style, TeamMemberSectionComponent, TestimonialSectionComponent, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen };
+export { AnimationDirective, BackgroundDirective, BannerContentFitDirective, BannerSectionComponent, BelowImageCardComponent, BorderDirective, ButtonDirectiveDirective, ButtonElementComponent, ColumnDirectiveDirective, ContainerFitDirective, ContentFitDirective, CornerDirective, CoveringImageCardComponent, FaqSectionComponent, FooterSectionComponent, HeadingElementComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageGridSectionComponent, ImageSectionComponent, NavbarSectionComponent, OverlayDirective, PositionLayoutDirectiveDirective, ServiceSectionComponent, SimpoButtonComponent, SimpoFooterLayoutDirective, SociaIconsComponent, TeamMemberSectionComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextElementComponent, TextImageSectionComponent, TextSectionComponent, TopOfImageCardComponent, VideoSectionComponent, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map