7.0.0

.eslintrc.json

@@ -38,13 +38,18 @@
             "varsIgnorePattern": "^_",
             "caughtErrorsIgnorePattern": "^_"
           }
-        ]
+        ],
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
       }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],

.gitignore

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

.prettierignore

@@ -3,4 +3,5 @@
 /dist
 /coverage
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

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.scss

@@ -4,16 +4,16 @@
 @use './lib/components/material-overrides';
 
 @mixin theme($theme) {
-  $config: mat.get-color-config($theme);
+  $config: mat.m2-get-color-config($theme);
   $primary-palette: map.get($config, 'primary');
   $accent-palette: map.get($config, 'accent');
   $background-palette: map.get($config, 'background');
   $foreground-palette: map.get($config, 'foreground');
 
-  $primary-color: mat.get-color-from-palette($primary-palette);
-  $accent-color: mat.get-color-from-palette($accent-palette);
-  $divider-color: mat.get-color-from-palette($foreground-palette, divider);
-  $card-color: mat.get-color-from-palette($background-palette, card);
+  $primary-color: mat.m2-get-color-from-palette($primary-palette);
+  $accent-color: mat.m2-get-color-from-palette($accent-palette);
+  $divider-color: mat.m2-get-color-from-palette($foreground-palette, divider);
+  $card-color: mat.m2-get-color-from-palette($background-palette, card);
 
   // make a new color map since @angular/material has a tedious API.
   $colors: (

apps/demo/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -7,16 +7,10 @@ import { AppComponent } from './app.component';
 import { DemoModule } from './demo';
 import { HomeModule } from './home';
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    BrowserModule,
-    DemoModule,
-    HomeModule,
-    HttpClientModule,
-  ],
-  bootstrap: [AppComponent],
-})
+@NgModule({ declarations: [AppComponent],
+    bootstrap: [AppComponent], imports: [AppRoutingModule,
+        BrowserAnimationsModule,
+        BrowserModule,
+        DemoModule,
+        HomeModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {}

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>

apps/demo/src/styles.scss

@@ -11,11 +11,11 @@
 @include layout.core();
 @include mat.core();
 
-$primary: mat.define-palette(mat.$blue-palette, A400);
-$accent: mat.define-palette(mat.$orange-palette, A400);
-$warn: mat.define-palette(mat.$red-palette);
+$primary: mat.m2-define-palette(mat.$m2-blue-palette, A400);
+$accent: mat.m2-define-palette(mat.$m2-orange-palette, A400);
+$warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$dark-theme: mat.define-dark-theme(
+$dark-theme: mat.m2-define-dark-theme(
   (
     color: (
       primary: $primary,
@@ -25,7 +25,7 @@ $dark-theme: mat.define-dark-theme(
   )
 );
 
-$light-theme: mat.define-light-theme(
+$light-theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,

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/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/angular",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/blidblid/berg-layout"

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/core",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/blidblid/berg-layout"

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

@@ -337,12 +337,6 @@ export class BergLayoutElement extends WebComponent<BergLayoutInputs> {
   }
 }
 
-try {
+if (!customElements.get(BERG_LAYOUT_TAG_NAME)) {
   customElements.define(BERG_LAYOUT_TAG_NAME, BergLayoutElement);
-} catch (e) {
-  console.warn(
-    `${BERG_LAYOUT_TAG_NAME} is already defined as a web component.`
-  );
-
-  throw e;
 }

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,
@@ -621,7 +621,7 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
       </style>
 
       <div class="berg-panel-overflow" part="overflow">
-        <div class="berg-panel-content" part="content">
+        <div part="content">
           <slot></slot>
         </div>
       </div>`;
@@ -641,9 +641,6 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
   }
 }
 
-try {
+if (!window.customElements.get(BERG_PANEL_TAG_NAME)) {
   customElements.define(BERG_PANEL_TAG_NAME, BergPanelElement);
-} catch (e) {
-  console.warn(`${BERG_PANEL_TAG_NAME} is already defined as a web component.`);
-  throw e;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/react",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/blidblid/berg-layout"

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;