@openproject/primer-view-components 0.58.0 → 0.59.0-rc.4f5605988

package/app/components/primer/open_project/border_box/collapsible_header.css

@@ -0,0 +1 @@
+.CollapsibleHeader{align-items:center;cursor:pointer;display:flex}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-row{display:none}

package/app/components/primer/open_project/border_box/collapsible_header.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "open_project/border_box/collapsible_header",
+  "selectors": [
+    ".CollapsibleHeader",
+    ".Box:has(.CollapsibleHeader--collapsed)",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-row"
+  ]
+}

package/app/components/primer/open_project/border_box/collapsible_header.d.ts

@@ -0,0 +1,18 @@
+declare class CollapsibleHeaderElement extends HTMLElement {
+    arrowDown: HTMLElement;
+    arrowUp: HTMLElement;
+    description: HTMLElement;
+    collapsed: string;
+    private _collapsed;
+    constructor();
+    connectedCallback(): void;
+    toggle(): void;
+    private hideAll;
+    private expandAll;
+}
+declare global {
+    interface Window {
+        CollapsibleHeaderElement: typeof CollapsibleHeaderElement;
+    }
+}
+export {};

package/app/components/primer/open_project/border_box/collapsible_header.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { attr, controller, target } from '@github/catalyst';
+let CollapsibleHeaderElement = class CollapsibleHeaderElement extends HTMLElement {
+    // eslint-disable-next-line custom-elements/no-constructor
+    constructor() {
+        super();
+        if (!this.closest('.Box')) {
+            throw new Error('No surrounding BorderBox found');
+        }
+    }
+    connectedCallback() {
+        if (this.collapsed === 'true') {
+            this._collapsed = true;
+            this.hideAll();
+        }
+        else {
+            this._collapsed = false;
+        }
+    }
+    toggle() {
+        if (this._collapsed) {
+            this._collapsed = false;
+            this.expandAll();
+        }
+        else {
+            this._collapsed = true;
+            this.hideAll();
+        }
+    }
+    hideAll() {
+        this.arrowDown.classList.remove('d-none');
+        this.arrowUp.classList.add('d-none');
+        if (this.description !== undefined) {
+            this.description.classList.add('d-none');
+        }
+        this.classList.add('CollapsibleHeader--collapsed');
+    }
+    expandAll() {
+        this.arrowDown.classList.add('d-none');
+        this.arrowUp.classList.remove('d-none');
+        if (this.description !== undefined) {
+            this.description.classList.remove('d-none');
+        }
+        this.classList.remove('CollapsibleHeader--collapsed');
+    }
+};
+__decorate([
+    target
+], CollapsibleHeaderElement.prototype, "arrowDown", void 0);
+__decorate([
+    target
+], CollapsibleHeaderElement.prototype, "arrowUp", void 0);
+__decorate([
+    target
+], CollapsibleHeaderElement.prototype, "description", void 0);
+__decorate([
+    attr
+], CollapsibleHeaderElement.prototype, "collapsed", void 0);
+CollapsibleHeaderElement = __decorate([
+    controller
+], CollapsibleHeaderElement);
+if (!window.customElements.get('collapsible-header')) {
+    window.CollapsibleHeaderElement = CollapsibleHeaderElement;
+    window.customElements.define('collapsible-header', CollapsibleHeaderElement);
+}

package/app/components/primer/primer.d.ts

@@ -30,3 +30,4 @@ import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
 import './open_project/danger_dialog_form_helper';
+import './open_project/border_box/collapsible_header';

package/app/components/primer/primer.js

@@ -30,3 +30,4 @@ import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
 import './open_project/danger_dialog_form_helper';
+import './open_project/border_box/collapsible_header';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.58.0",
+  "version": "0.59.0-rc.4f5605988",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/classes.json

@@ -114,7 +114,8 @@
     "Primer::OpenProject::BorderGrid"
   ],
   "Box": [
-    "Primer::Beta::BorderBox"
+    "Primer::Beta::BorderBox",
+    "Primer::OpenProject::BorderBox::CollapsibleHeader"
   ],
   "Box--blue": [
     "Primer::Beta::BorderBox"
@@ -239,6 +240,9 @@
   "ButtonGroup": [
     "Primer::Beta::ButtonGroup"
   ],
+  "CollapsibleHeader": [
+    "Primer::OpenProject::BorderBox::CollapsibleHeader"
+  ],
   "Counter": [
     "Primer::Beta::Counter"
   ],