feat(documentation): investigate and document cross component dom referencing

packages/components/src/components/post-icon/readme.md

@@ -33,6 +33,9 @@ some content
  - [post-mainnavigation](../post-mainnavigation)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
+ - [post-test-button](../post-test-button)
+ - [post-test-button2](../post-test-button2)
+ - [post-test-button3](../post-test-button3)
 
 ### Graph
 ```mermaid
@@ -48,6 +51,9 @@ graph TD;
   post-mainnavigation --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon
+  post-test-button --> post-icon
+  post-test-button2 --> post-icon
+  post-test-button3 --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/components/src/components/post-test-button-control/post-test-button-control.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button-control/post-test-button-control.tsx

@@ -0,0 +1,72 @@
+import { Component, h, Host, Element, Prop } from '@stencil/core';
+
+declare global {
+  interface Element {
+    ariaControlsElements: Element[];
+  }
+}
+
+@Component({
+  tag: 'post-test-button-control',
+  styleUrl: 'post-test-button-control.scss',
+  shadow: true,
+})
+export class PostTestButtonControl {
+  @Element() host: HTMLPostTestButtonControlElement;
+
+  private internalEl: HTMLElement;
+
+  private readonly handleToggleClick = () => {
+    if (this.host && this.internalEl) {
+      const timestamp = Date.now();
+      this.internalEl.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
+    }
+  };
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the ariaContols id
+   */
+  @Prop() ariaControlsId?: string;
+
+  private setProperties() {
+    if (this.host) {
+      if (this.workaround == 'ariaControlsElements') {
+        console.log(this.internalEl);
+        this.host.ariaControlsElements = [this.internalEl];
+        console.log(this.host.ariaControlsElements);
+      } else {
+        this.host.ariaControlsElements = [];
+      }
+    }
+  }
+
+  componentWillLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
+  render() {
+    return (
+      <Host role="button" tabindex="0" onClick={this.handleToggleClick}>
+        Toggle Text
+        <div
+          aria-live="assertive"
+          id={this.workaround === 'none' ? this.ariaControlsId : ''}
+          ref={el => {
+            if (el) this.internalEl = el as HTMLElement;
+          }}
+        >
+          <p>Controlled Text shown at xxxxxxxxxxx.</p>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button-control/readme.md

@@ -0,0 +1,18 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description                     | Type     | Default     |
+| ---------------- | ------------------ | ------------------------------- | -------- | ----------- |
+| `ariaControlsId` | `aria-controls-id` | Defines the ariaContols id      | `string` | `undefined` |
+| `workaround`     | `workaround`       | Defines the selected workaround | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button-control2/post-test-button-control2.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button-control2/post-test-button-control2.tsx

@@ -0,0 +1,34 @@
+import { Component, h, Host, Element, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-button-control2',
+  styleUrl: 'post-test-button-control2.scss',
+  shadow: true,
+})
+export class PostTestButtonControl {
+  @Element() hostEl: HTMLPostTestButtonControl2Element;
+  // private internalEl: HTMLElement;
+
+  // private readonly handleToggleClick = () => {
+  //   if (this.hostEl && this.internalEl) {
+  //     const timestamp = Date.now();
+  //     this.internalEl.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
+  //   }
+  // };
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  render() {
+    return (
+      <Host>
+        Toggle Text
+        <div role="button" tabindex="0" aria-live="assertive" id="text2">
+          <p>Controlled Text shown at xxxxxxxxxxx.</p>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button-control2/readme.md

@@ -0,0 +1,17 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                     | Type     | Default     |
+| ------------ | ------------ | ------------------------------- | -------- | ----------- |
+| `workaround` | `workaround` | Defines the selected workaround | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button/post-test-button.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button/post-test-button.tsx

@@ -0,0 +1,38 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button',
+  styleUrl: 'post-test-button.scss',
+  shadow: true,
+})
+export class PostTestButton {
+  /**
+   * Defines the ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host
+        data-version={version}
+        class="btn btn-primary"
+        role="button"
+        tabindex="0"
+        aria-labelledby={this.ariaLabelledbyId}
+        aria-describedby={this.ariaDescribedbyId}
+      >
+        <slot name="label-slot"></slot>
+        <div>
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button/readme.md

@@ -0,0 +1,31 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                   | Type     | Default     |
+| ------------------- | --------------------- | ----------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the ariaDescribedbyId | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the ariaLabelledbyId  | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button --> post-icon
+  style post-test-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button2/post-test-button2.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button2/post-test-button2.tsx

@@ -0,0 +1,64 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button2',
+  styleUrl: 'post-test-button2.scss',
+  shadow: { delegatesFocus: true },
+})
+export class PostTestButton2 {
+  private internalEl: HTMLElement;
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the selected ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the selected ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  private setProperties() {
+    if (this.internalEl) {
+      const arialabelEl = document.querySelector(`[id=${this.ariaLabelledbyId}]`);
+      const ariadescEl = document.querySelector(`[id=${this.ariaDescribedbyId}]`);
+
+      if (this.workaround == 'ariaLabelledByElements') {
+        this.internalEl.ariaLabelledByElements = [arialabelEl];
+      } else {
+        this.internalEl.ariaLabelledByElements = [];
+      }
+
+      if (this.workaround == 'ariaDescribedByElements') {
+        this.internalEl.ariaDescribedByElements = [ariadescEl];
+      } else {
+        this.internalEl.ariaDescribedByElements = [];
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host data-version={version} class="btn btn-primary">
+        <slot name="label-slot"></slot>
+        <div ref={el => (this.internalEl = el as HTMLElement)} role="button" tabindex="0">
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button2/readme.md

@@ -0,0 +1,32 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                            | Type     | Default     |
+| ------------------- | --------------------- | -------------------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the selected ariaDescribedbyId | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the selected ariaLabelledbyId  | `string` | `undefined` |
+| `workaround`        | `workaround`          | Defines the selected workaround        | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button2 --> post-icon
+  style post-test-button2 fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button3/post-test-button3.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';