@recursyve/nice-ui-kit.v2 13.2.0-beta.120 → 13.2.0-beta.122

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "13.2.0-beta.120",
+  "version": "13.2.0-beta.122",
   "exports": {
     ".": {
       "sass": "./_index.scss",

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

@@ -1,5 +1,37 @@
+/* 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;
         }