@festo-ui/angular 3.1.0-pre-20220328.2 → 3.1.0-pre-20220331.4

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './lib/components/snackbar/snackbar.module';
 export * from './lib/content/content.module';
 export * from './lib/forms/forms.module';
 export * from './lib/layout/layout.module';
+export * from './lib/components/image-gallery/image-gallery.module';
 export * from './lib/festo-angular.module';
 export * from './lib/components/modals/modal.service';
 export * from './lib/components/snackbar/snackbar.service';

package/lib/components/image-gallery/image-gallery.component.d.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { Modal } from '../modals';
+import * as i0 from "@angular/core";
+export interface ImageGalleryData {
+    startIndex: number;
+    images: {
+        url: string;
+        alt: string;
+    }[];
+    thumbnailImages?: {
+        url: string;
+        alt: string;
+    }[];
+    pagination?: boolean;
+    slideChanged?: (index: number) => void;
+}
+export declare class ImageGalleryComponent implements Modal<ImageGalleryData, any> {
+    private cd;
+    data: ImageGalleryData;
+    close: EventEmitter<any>;
+    cancel: EventEmitter<any>;
+    ok: EventEmitter<any>;
+    thumbsSwiper: any;
+    currentIndex: number;
+    constructor(cd: ChangeDetectorRef);
+    onKeyUp(event: KeyboardEvent): void;
+    onSlideChange(swiper: {
+        activeIndex: number;
+    }[]): void;
+    onClose(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageGalleryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageGalleryComponent, "fng-image-gallery", never, { "data": "data"; }, { "close": "close"; "cancel": "cancel"; "ok": "ok"; }, never, never>;
+}

package/lib/components/image-gallery/image-gallery.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./image-gallery.component";
+import * as i2 from "@angular/common";
+import * as i3 from "swiper/angular";
+export * from './image-gallery.component';
+export declare class FestoAngularImageGalleryModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FestoAngularImageGalleryModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FestoAngularImageGalleryModule, [typeof i1.ImageGalleryComponent], [typeof i2.CommonModule, typeof i3.SwiperModule], [typeof i1.ImageGalleryComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FestoAngularImageGalleryModule>;
+}

package/lib/components/modals/confirm/confirm.component.d.ts

@@ -7,23 +7,21 @@ export interface ConfirmData {
     body: string;
     cancel?: string;
     ok?: string;
+    large?: boolean;
 }
 export declare class ConfirmComponent implements AfterViewInit, Modal<ConfirmData, any> {
     private cd;
-    hasScrollableContent: boolean;
     data: ConfirmData;
     close: EventEmitter<any>;
     cancel: EventEmitter<any>;
     ok: EventEmitter<any>;
     closeBtn: ElementRef;
-    content: ElementRef;
     onKeyUp(event: KeyboardEvent): void;
     constructor(cd: ChangeDetectorRef);
     ngAfterViewInit(): void;
     onClose(): void;
     onOk(): void;
     onCancel(): void;
-    private shouldScroll;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmComponent, "fng-confirm", never, { "data": "data"; }, { "close": "close"; "cancel": "cancel"; "ok": "ok"; }, never, never>;
 }

package/lib/components/modals/custom-modal/custom-modal.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class CustomModalComponent {
+    closeOnBackdrop: boolean;
+    large: boolean;
+    visible: boolean;
+    visibleChange: EventEmitter<boolean>;
+    header: string;
+    subheader: string;
+    acknowledgeLabel: string;
+    acknowledge: EventEmitter<void>;
+    cancelLabel: string;
+    cancel: EventEmitter<void>;
+    closeModal(): void;
+    onCancel(): void;
+    onAcknowledge(): void;
+    onClickOutside(): void;
+    onClickInside(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomModalComponent, "fng-custom-modal", never, { "closeOnBackdrop": "closeOnBackdrop"; "large": "large"; "visible": "visible"; "header": "header"; "subheader": "subheader"; "acknowledgeLabel": "acknowledgeLabel"; "cancelLabel": "cancelLabel"; }, { "visibleChange": "visibleChange"; "acknowledge": "acknowledge"; "cancel": "cancel"; }, never, ["*"]>;
+}

package/lib/components/modals/modal.service.d.ts

@@ -5,6 +5,7 @@ import { Modal, ModalOptions, ModalResult } from './index';
 import { AlertData } from './alert/alert.component';
 import { ConfirmData } from './confirm/confirm.component';
 import { PromptData } from './prompt/prompt.component';
+import { ImageGalleryData } from '../image-gallery/image-gallery.component';
 import * as i0 from "@angular/core";
 export declare class ModalService {
     protected overlay: Overlay;
@@ -13,6 +14,7 @@ export declare class ModalService {
     alert(data: AlertData, options?: ModalOptions): Promise<ModalResult<any>>;
     confirm(data: ConfirmData, options?: ModalOptions): Promise<ModalResult<any>>;
     prompt(data: PromptData, options?: ModalOptions): Promise<ModalResult<any>>;
+    openImageGallery(data: ImageGalleryData): Promise<ModalResult<any>>;
     open<TData, TResult, TModal extends Modal<TData, TResult>>(data: TData, modal: ComponentType<TModal>, options: ModalOptions): Promise<ModalResult<TResult>>;
     private dispose;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;

package/lib/components/modals/modals.module.d.ts

@@ -2,16 +2,19 @@ import * as i0 from "@angular/core";
 import * as i1 from "./alert/alert.component";
 import * as i2 from "./confirm/confirm.component";
 import * as i3 from "./prompt/prompt.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/router";
-import * as i6 from "@angular/cdk/overlay";
-import * as i7 from "../../forms/forms.module";
+import * as i4 from "./custom-modal/custom-modal.component";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/router";
+import * as i7 from "@angular/cdk/overlay";
+import * as i8 from "../../forms/forms.module";
+import * as i9 from "../components.module";
 export * from './index';
 export * from './alert/alert.component';
 export * from './confirm/confirm.component';
 export * from './prompt/prompt.component';
+export * from './custom-modal/custom-modal.component';
 export declare class FestoAngularModalsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FestoAngularModalsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FestoAngularModalsModule, [typeof i1.AlertComponent, typeof i2.ConfirmComponent, typeof i3.PromptComponent], [typeof i4.CommonModule, typeof i5.RouterModule, typeof i6.OverlayModule, typeof i7.FestoAngularFormsModule], [typeof i1.AlertComponent, typeof i2.ConfirmComponent, typeof i3.PromptComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FestoAngularModalsModule, [typeof i1.AlertComponent, typeof i2.ConfirmComponent, typeof i3.PromptComponent, typeof i4.CustomModalComponent], [typeof i5.CommonModule, typeof i6.RouterModule, typeof i7.OverlayModule, typeof i8.FestoAngularFormsModule, typeof i9.FestoAngularComponentsModule], [typeof i1.AlertComponent, typeof i2.ConfirmComponent, typeof i3.PromptComponent, typeof i4.CustomModalComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FestoAngularModalsModule>;
 }

package/lib/festo-angular.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "./content/content.module";
 import * as i4 from "./forms/forms.module";
 import * as i5 from "./components/modals/modals.module";
 import * as i6 from "./components/snackbar/snackbar.module";
+import * as i7 from "./components/image-gallery/image-gallery.module";
 export declare class FestoAngularModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FestoAngularModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FestoAngularModule, never, [typeof i1.FestoAngularLayoutModule, typeof i2.FestoAngularComponentsModule, typeof i3.FestoAngularContentModule, typeof i4.FestoAngularFormsModule, typeof i5.FestoAngularModalsModule, typeof i6.FestoAngularSnackbarModule], [typeof i1.FestoAngularLayoutModule, typeof i2.FestoAngularComponentsModule, typeof i3.FestoAngularContentModule, typeof i4.FestoAngularFormsModule, typeof i5.FestoAngularModalsModule, typeof i6.FestoAngularSnackbarModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FestoAngularModule, never, [typeof i1.FestoAngularLayoutModule, typeof i2.FestoAngularComponentsModule, typeof i3.FestoAngularContentModule, typeof i4.FestoAngularFormsModule, typeof i5.FestoAngularModalsModule, typeof i6.FestoAngularSnackbarModule, typeof i7.FestoAngularImageGalleryModule], [typeof i1.FestoAngularLayoutModule, typeof i2.FestoAngularComponentsModule, typeof i3.FestoAngularContentModule, typeof i4.FestoAngularFormsModule, typeof i5.FestoAngularModalsModule, typeof i6.FestoAngularSnackbarModule, typeof i7.FestoAngularImageGalleryModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FestoAngularModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/angular",
-  "version": "3.1.0-pre-20220328.2",
+  "version": "3.1.0-pre-20220331.4",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "description": "CSS framework and utils to build FESTO web applications",
@@ -14,13 +14,20 @@
     "@angular/cdk": "^13.1.1",
     "rxjs": "^6.6.7",
     "@festo-ui/web-essentials": "*",
+    "swiper": "8.0.7",
+    "simplebar": "5.3.6",
+    "quill": "1.3.7",
+    "flatpickr": "^4.6.9",
     "@angular/platform-browser-dynamic": "13.1.1"
   },
   "dependencies": {
+    "tslib": "^2.1.0"
+  },
+  "optionalDependencies": {
     "flatpickr": "^4.6.9",
-    "quill": "~1.3.7",
-    "tslib": "^2.1.0",
-    "simplebar": "5.3.6"
+    "quill": "1.3.7",
+    "simplebar": "5.3.6",
+    "swiper": "8.0.7"
   },
   "module": "fesm2015/festo-ui-angular.mjs",
   "es2020": "fesm2020/festo-ui-angular.mjs",

package/scss/base/components/buttons/button/button.component.scss

@@ -1,4 +1,9 @@
-.fng-button {
+fng-button {
+  display: inline-block;
+}
+
+.fng-button { 
+  width: 100%;
   .fng-button-text {
     margin: -1px 0px 1px 0px;
   }

package/scss/base/components/image-gallery/styles.scss

@@ -0,0 +1,5 @@
+@import "swiper/scss";
+@import "swiper/scss/free-mode";
+@import "swiper/scss/navigation";
+@import "swiper/scss/thumbs";
+@import "swiper/scss/zoom";

package/scss/base/components/popovers/popover/styles.scss

@@ -1,6 +1,5 @@
-@import "~@angular/cdk/overlay-prebuilt";
-@import "../../../../../../web-essentials/scss/variables";
 @import "../../../../../../web-essentials/scss/popover";
+@import "@angular/cdk/overlay-prebuilt";
 
 /* This file is imported into global ~src/styles.scss to overwrite cdk overlay styles */
 

package/scss/base/forms/color-indicator/color-indicator.component.scss

@@ -21,7 +21,7 @@
   .fwe-color-label {
     height: 18px;
     font-size: $font-size-small;
-    font-weight: bold;
+    font-weight: $font-weight-bold;
     margin-bottom: $spacer-xxxs;
   }
 

package/scss/base/forms/color-picker/color-picker.component.scss

@@ -72,9 +72,9 @@ $knobSize: 14px;
     display: flex;
     .fwe-type-indicator {
       .fwe-input-type {
-        font-size: 12px;
-        line-height: 17px;
-        font-weight: bold;
+        font-size: $font-size-small;
+        line-height: calc(#{$font-size-small} + 5px);
+        font-weight: $font-weight-bold;
       }
       flex-shrink: 1;
       cursor: pointer;