@openproject/primer-view-components 0.31.0 → 0.32.0-rc.a92b65d7

package/app/components/primer/open_project/sub_header.css

@@ -0,0 +1 @@
+.SubHeader{align-items:center;display:grid;flex-wrap:wrap;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;row-gap:16px}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom;margin-bottom:16px}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}

package/app/components/primer/open_project/sub_header.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/sub_header",
+  "selectors": [
+    ".SubHeader",
+    ".SubHeader-rightPane",
+    ".SubHeader-middlePane",
+    ".SubHeader-bottomPane",
+    ".SubHeader-leftPane",
+    ".SubHeader-filterContainer"
+  ]
+}

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

@@ -0,0 +1,13 @@
+declare class SubHeaderElement extends HTMLElement {
+    filterInput: HTMLElement;
+    hiddenItemsOnExpandedFilter: HTMLElement[];
+    shownItemsOnExpandedFilter: HTMLElement[];
+    expandFilterInput(): void;
+    collapseFilterInput(): void;
+}
+declare global {
+    interface Window {
+        SubHeaderElement: typeof SubHeaderElement;
+    }
+}
+export {};

package/app/components/primer/open_project/sub_header_element.js

@@ -0,0 +1,44 @@
+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 { controller, target, targets } from '@github/catalyst';
+let SubHeaderElement = class SubHeaderElement extends HTMLElement {
+    expandFilterInput() {
+        for (const item of this.hiddenItemsOnExpandedFilter) {
+            item.classList.add('d-none');
+        }
+        for (const item of this.shownItemsOnExpandedFilter) {
+            item.classList.remove('d-none');
+        }
+        this.classList.add('d-flex');
+        this.filterInput.focus();
+    }
+    collapseFilterInput() {
+        for (const item of this.hiddenItemsOnExpandedFilter) {
+            item.classList.remove('d-none');
+        }
+        for (const item of this.shownItemsOnExpandedFilter) {
+            item.classList.add('d-none');
+        }
+        this.classList.remove('d-flex');
+    }
+};
+__decorate([
+    target
+], SubHeaderElement.prototype, "filterInput", void 0);
+__decorate([
+    targets
+], SubHeaderElement.prototype, "hiddenItemsOnExpandedFilter", void 0);
+__decorate([
+    targets
+], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
+SubHeaderElement = __decorate([
+    controller
+], SubHeaderElement);
+if (!window.customElements.get('sub-header')) {
+    window.SubHeaderElement = SubHeaderElement;
+    window.customElements.define('sub-header', SubHeaderElement);
+}

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

@@ -24,3 +24,4 @@ import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
+import './open_project/sub_header_element';

package/app/components/primer/primer.js

@@ -24,3 +24,4 @@ import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
+import './open_project/sub_header_element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.31.0",
+  "version": "0.32.0-rc.a92b65d7",
   "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

@@ -555,6 +555,24 @@
   "State--small": [
     "Primer::Beta::State"
   ],
+  "SubHeader": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-bottomPane": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-filterContainer": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-leftPane": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-middlePane": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-rightPane": [
+    "Primer::OpenProject::SubHeader"
+  ],
   "Subhead": [
     "Primer::Beta::Subhead"
   ],