@recursyve/nice-ui-kit.v2 14.0.0-beta.100 → 14.0.0-beta.101

package/lib/components/assets-carousel/assets-carousel.component.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, QueryList } from "@angular/core";
+import { ElementRef, EventEmitter, QueryList, TemplateRef } from "@angular/core";
 import { ControlValueAccessor } from "@angular/forms";
 import { CanColor, ThemePalette } from "@angular/material/core";
 import * as i0 from "@angular/core";
@@ -51,6 +51,7 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     multipleUpload: boolean;
     visiblePreviewAsset: number;
     showAddAssetContainer: boolean;
+    activeContent: TemplateRef<any>;
     activeChange: EventEmitter<number>;
     removedAsset: EventEmitter<NiceAssets>;
     listStyle: {
@@ -76,5 +77,5 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     clickCustom(action: NiceAssetsCarouselActions): void;
     startSyncVideo(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAssetsCarouselComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "multipleUpload": "multipleUpload"; "visiblePreviewAsset": "visiblePreviewAsset"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; "removedAsset": "removedAsset"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "multipleUpload": "multipleUpload"; "visiblePreviewAsset": "visiblePreviewAsset"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; "removedAsset": "removedAsset"; }, ["activeContent"], never, false>;
 }

package/lib/components/assets-carousel/assets-carousel.module.d.ts

@@ -2,16 +2,17 @@ import { ModuleWithProviders } from "@angular/core";
 import { NiceAssetsCarouselOptions } from "./assets-carousel.component";
 import * as i0 from "@angular/core";
 import * as i1 from "./assets-carousel.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/material/icon";
-import * as i4 from "@angular/material/button";
-import * as i5 from "@angular/material/menu";
-import * as i6 from "@angular/material/core";
-import * as i7 from "../../directives/dropzone/dropzone.module";
-import * as i8 from "@ngx-translate/core";
+import * as i2 from "./directives/assets-carousel-active-content.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/icon";
+import * as i5 from "@angular/material/button";
+import * as i6 from "@angular/material/menu";
+import * as i7 from "@angular/material/core";
+import * as i8 from "../../directives/dropzone/dropzone.module";
+import * as i9 from "@ngx-translate/core";
 export declare class NiceAssetsCarouselModule {
     static forRoot(options?: NiceAssetsCarouselOptions): ModuleWithProviders<NiceAssetsCarouselModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAssetsCarouselModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceAssetsCarouselModule, [typeof i1.NiceAssetsCarouselComponent], [typeof i2.CommonModule, typeof i3.MatIconModule, typeof i4.MatButtonModule, typeof i5.MatMenuModule, typeof i6.MatRippleModule, typeof i7.NiceDropzoneModule, typeof i8.TranslateModule], [typeof i1.NiceAssetsCarouselComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceAssetsCarouselModule, [typeof i1.NiceAssetsCarouselComponent, typeof i2.NiceAssetsCarouselActiveContentDirective], [typeof i3.CommonModule, typeof i4.MatIconModule, typeof i5.MatButtonModule, typeof i6.MatMenuModule, typeof i7.MatRippleModule, typeof i8.NiceDropzoneModule, typeof i9.TranslateModule], [typeof i1.NiceAssetsCarouselComponent, typeof i2.NiceAssetsCarouselActiveContentDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NiceAssetsCarouselModule>;
 }

package/lib/components/assets-carousel/directives/assets-carousel-active-content.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class NiceAssetsCarouselActiveContentDirective {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceAssetsCarouselActiveContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceAssetsCarouselActiveContentDirective, "[niceAssetsCarouselActiveContent]", never, {}, {}, never, never, false>;
+}

package/lib/components/assets-carousel/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from "./assets-carousel.component";
 export * from "./assets-carousel.module";
+export * from "./directives/assets-carousel-active-content.directive";

package/lib/components/collapsable/collapsable.component.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { Subject } from "rxjs";
+import * as i0 from "@angular/core";
+export declare class NiceCollapsableComponent implements OnInit, OnChanges, OnDestroy {
+    open: boolean;
+    openChange: EventEmitter<boolean>;
+    unsubscribeAll$: Subject<void>;
+    control: FormControl<boolean>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceCollapsableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceCollapsableComponent, "nice-collapsable", never, { "open": "open"; }, { "openChange": "openChange"; }, never, ["[niceCollapsableTitle]", "[niceCollapsableContent]"], false>;
+}

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./collapsable.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export declare class NiceCollapsableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceCollapsableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceCollapsableModule, [typeof i1.NiceCollapsableComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule], [typeof i1.NiceCollapsableComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NiceCollapsableModule>;
+}

package/lib/components/collapsable/index.d.ts

@@ -0,0 +1 @@
+export * from "./public-api";

package/lib/components/collapsable/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from "./collapsable.component";
+export * from "./collapsable.module";

package/lib/components/public-api.d.ts

@@ -4,6 +4,7 @@ export * from "./async-typeahead";
 export * from "./base-form";
 export * from "./card";
 export * from "./carousel";
+export * from "./collapsable";
 export * from "./date-range-picker";
 export * from "./drawer";
 export * from "./export-bottom-sheet";

package/lib/directives/chip-list/chip-list.directive.d.ts

@@ -1,6 +1,7 @@
 import { ElementRef, OnChanges, OnInit, SimpleChanges } from "@angular/core";
 import { ControlValueAccessor, NgControl } from "@angular/forms";
 import { NiceAsyncTypeaheadComponent } from "../../components";
+import { KeyboardCodes } from "../../utils";
 import { NiceChipListItemsComponent } from "./chip-list-items/chip-list-items.component";
 import * as i0 from "@angular/core";
 export declare class NiceChipListDirective implements ControlValueAccessor, OnInit, OnChanges {
@@ -9,6 +10,7 @@ export declare class NiceChipListDirective implements ControlValueAccessor, OnIn
     private elementRef;
     withItemList: NiceChipListItemsComponent;
     reloadOnSelected: boolean;
+    separatorKeyboardCodes: KeyboardCodes[];
     private unsubscribeAll$;
     private values$;
     private _values;
@@ -25,5 +27,5 @@ export declare class NiceChipListDirective implements ControlValueAccessor, OnIn
     private addValue;
     private updateTypeaheadSearchOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListDirective, [{ optional: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipListDirective, "input[niceChipList], nice-async-typeahead[niceChipList]", never, { "withItemList": "withItemList"; "reloadOnSelected": "reloadOnSelected"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipListDirective, "input[niceChipList], nice-async-typeahead[niceChipList]", never, { "withItemList": "withItemList"; "reloadOnSelected": "reloadOnSelected"; "separatorKeyboardCodes": "separatorKeyboardCodes"; }, {}, never, never, false>;
 }

package/lib/utils/keyboard.utils.d.ts

@@ -2,5 +2,6 @@ export declare enum KeyboardCodes {
     ArrowUp = "ArrowUp",
     ArrowDown = "ArrowDown",
     Enter = "Enter",
-    Shift = "Shift"
+    Shift = "Shift",
+    Comma = "Comma"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "14.0.0-beta.100",
+  "version": "14.0.0-beta.101",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/collapsable/collapsable.theme.scss

@@ -0,0 +1,51 @@
+/* From https://github.com/saadeghi/daisyui/blob/master/src/components/unstyled/collapse.css */
+
+@mixin nice-collapsable-theme($theme) {
+    nice-collapsable {
+        .collapse.collapse {
+            @apply visible;
+        }
+        .collapse {
+            @apply relative grid overflow-hidden;
+        }
+        .collapse-title,
+        .collapse > input[type="checkbox"],
+        .collapse-content {
+            @apply col-start-1 row-start-1;
+        }
+        .collapse > input[type="checkbox"] {
+            @apply opacity-0;
+
+            appearance: none;
+            -webkit-appearance: none;
+            -ms-progress-appearance: none;
+        }
+        .collapse-content {
+            @apply row-start-2 overflow-hidden;
+            max-height: 0px;
+        }
+        .collapse-open .collapse-content,
+        .collapse:focus:not(.collapse-close) .collapse-content,
+        .collapse:not(.collapse-close)
+        input[type="checkbox"]:checked
+        ~ .collapse-content {
+            max-height: 9000px;
+        }
+
+        .collapse-title {
+            @apply bg-card p-4;
+        }
+
+        .peer:hover ~ .collapse-title {
+            @apply shadow-2xl;
+        }
+
+        .collapse-content {
+            @apply bg-card;
+        }
+
+        .peer:checked ~ .collapse-content {
+            @apply p-4;
+        }
+    }
+}

package/src/lib/nice.theme.scss

@@ -8,7 +8,8 @@
 @import "./components/assets-carousel/assets-carousel.theme";
 @import "./components/base-form/base-form.theme";
 @import "./components/card/card.theme";
-@import "components/date-range-picker/date-range-picker.theme";
+@import "./components/collapsable/collapsable.theme";
+@import "./components/date-range-picker/date-range-picker.theme";
 @import "./components/drawer/drawer.theme";
 @import "./components/horizontal-stepper/horizontal-stepper.theme";
 @import "./components/navigation/horizontal/horizontal.theme";
@@ -22,6 +23,7 @@
     @include nice-assets-carousel-theme($theme);
     @include nice-base-form-theme($theme);
     @include nice-card-theme($theme);
+    @include nice-collapsable-theme($theme);
     @include nice-date-picker-theme($theme);
     @include nice-drawer-theme($theme);
     @include nice-horizontal-stepper-theme($theme);