docs

.gitignore

@@ -38,6 +38,6 @@ testem.log
 .DS_Store
 Thumbs.db
 
+# Caches
 .angular
-
-.nx/cache
+.nx/

README.md

@@ -1,3 +1,6 @@
 # berg-layout
 
-Check out the usage and demo [here](https://berglayout.com/).
+- Usage and demo [here](https://berglayout.com/).
+- @berg-layout/core [here](https://github.com/blidblid/berg-layout/tree/main/libs/core)
+- @berg-layout/angular [here](https://github.com/blidblid/berg-layout/tree/main/libs/angular)
+- @berg-layout/react [here](https://github.com/blidblid/berg-layout/tree/main/libs/react)

apps/demo/project.json

@@ -7,12 +7,12 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/demo",
         "index": "apps/demo/src/index.html",
-        "main": "apps/demo/src/main.ts",
+        "browser": "apps/demo/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/demo/tsconfig.app.json",
         "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
@@ -39,9 +39,7 @@
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true

apps/demo/src/app/home/home.component.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 15%;
+  padding-top: 24vh;
   position: fixed;
   top: 0;
   bottom: 0;

apps/demo/src/lib/components/toolbar/toolbar.component.html

@@ -10,11 +10,11 @@
   </div>
 
   <div class="flex">
-    <a mat-button routerLink="/">
+    <a mat-icon-button routerLink="/">
       <mat-icon svgIcon="home"></mat-icon>
     </a>
 
-    <button mat-button (click)="toggleRight()">
+    <button mat-icon-button (click)="toggleRight()">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>
   </div>

firebase.json

@@ -1,11 +1,7 @@
 {
   "hosting": {
-    "public": "dist/apps/demo",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
+    "public": "dist/apps/demo/browser",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
         "source": "**",

libs/angular/README.md

@@ -10,3 +10,26 @@ Usage and demo [here](https://berglayout.com/angular).
 
 - Panel inputs and outputs [here](https://github.com/blidblid/berg-layout/blob/main/libs/core/src/lib/components/panel/panel-model.ts)
 - Layout inputs and outputs [here](https://github.com/blidblid/berg-layout/blob/main/libs/core/src/lib/components/layout/layout-model.ts)
+
+## Styling
+
+Since berg-layout uses web components, the layout styles are encapsulated in the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).
+
+You can still style them, but you need to use the pseudo element [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) to pierce the encapsulation.
+
+### Styling panels
+
+The panels have two `::part()`
+
+- `part="content"` which wraps your content
+- `part="overflow"` which handles overflow and wraps `content`
+
+To for example, style `content`, use `::part`
+
+```css
+.berg-panel-top {
+  &::part(content) {
+    padding: 16px;
+  }
+}
+```

libs/core/README.md

@@ -10,3 +10,26 @@ Usage and demo [here](https://berglayout.com/core).
 
 - Panel inputs and outputs [here](https://github.com/blidblid/berg-layout/blob/main/libs/core/src/lib/components/panel/panel-model.ts)
 - Layout inputs and outputs [here](https://github.com/blidblid/berg-layout/blob/main/libs/core/src/lib/components/layout/layout-model.ts)
+
+## Styling
+
+Since berg-layout uses web components, the layout styles are encapsulated in the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).
+
+You can still style them, but you need to use the pseudo element [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) to pierce the encapsulation.
+
+### Styling panels
+
+The panels have two `::part()`
+
+- `part="content"` which wraps your content
+- `part="overflow"` which handles overflow and wraps `content`
+
+To for example, style `content`, use `::part`
+
+```css
+.berg-panel-top {
+  &::part(content) {
+    padding: 16px;
+  }
+}
+```

libs/core/src/lib/components/panel/panel.ts

@@ -22,7 +22,7 @@ import {
   withLatestFrom,
 } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceNumberProperty } from '../../util';
-import { BergLayoutElement, BERG_LAYOUT_TAG_NAME } from '../layout';
+import { BERG_LAYOUT_TAG_NAME, BergLayoutElement } from '../layout';
 import {
   BERG_LAYOUT_NO_TRANSITION_CLASS,
   BERG_LAYOUT_RESIZING_HORIZONTAL_CLASS,

libs/react/README.md

@@ -10,3 +10,26 @@ Usage and demo [here](https://berglayout.com/react).
 
 - Panel inputs and outputs [here](https://github.com/blidblid/berg-layout/blob/main/libs/core/src/lib/components/panel/panel-model.ts)
 - Layout inputs and outputs [here](https://github.com/blidblid/berg-layout/blob/main/libs/core/src/lib/components/layout/layout-model.ts)
+
+## Styling
+
+Since berg-layout uses web components, the layout styles are encapsulated in the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).
+
+You can still style them, but you need to use the pseudo element [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) to pierce the encapsulation.
+
+### Styling panels
+
+The panels have two `::part()`
+
+- `part="content"` which wraps your content
+- `part="overflow"` which handles overflow and wraps `content`
+
+To for example, style `content`, use `::part`
+
+```css
+.berg-panel-top {
+  &::part(content) {
+    padding: 16px;
+  }
+}
+```

libs/react/src/lib/layout/layout.tsx

@@ -1,11 +1,12 @@
 import '@berg-layout/core';
 import {
-  BergLayoutInputs,
   BERG_LAYOUT_DEFAULT_INPUTS,
+  BergLayoutInputs,
 } from '@berg-layout/core';
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 
-export type BergLayoutProps = PropsWithChildren<Partial<BergLayoutInputs>>;
+export type BergLayoutProps = PropsWithChildren<Partial<BergLayoutInputs>> &
+  HTMLAttributes<HTMLDivElement>;
 
 export const BERG_LAYOUT_DEFAULT_PROPS = BERG_LAYOUT_DEFAULT_INPUTS;
 

libs/react/src/lib/panel/panel.tsx

@@ -1,8 +1,17 @@
 import '@berg-layout/core';
-import { BergPanelInputs, BERG_PANEL_DEFAULT_INPUTS } from '@berg-layout/core';
-import { PropsWithChildren } from 'react';
+import {
+  BERG_PANEL_DEFAULT_INPUTS,
+  BergPanelInputs,
+  BergPanelOutputs,
+} from '@berg-layout/core';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 
-export type BergPanelProps = PropsWithChildren<Partial<BergPanelInputs>>;
+export type BergPanelProps = PropsWithChildren<Partial<BergPanelInputs>> &
+  HTMLAttributes<HTMLDivElement> & {
+    [P in keyof BergPanelOutputs as `on${Capitalize<string & P>}`]?: (
+      event: BergPanelOutputs[P]
+    ) => void;
+  };
 
 export const BERG_PANEL_DEFAULT_PROPS = BERG_PANEL_DEFAULT_INPUTS;