@aurodesignsystem-dev/auro-formkit 0.0.0-pr1424.2 → 0.0.0-pr1424.4

package/components/datepicker/demo/api.html

@@ -53,6 +53,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js";

package/components/datepicker/demo/api.js

@@ -6,6 +6,7 @@ import { updateMaxDateExample } from './../apiExamples/update-max-date';
 import { updateMinDateExample } from './../apiExamples/update-min-date';
 import { validityExample } from './../apiExamples/validity';
 import { inDialogExample } from '../apiExamples/in-dialog';
+import { inDrawerExample } from '../apiExamples/in-drawer';
 import { localizationExample } from '../apiExamples/localization';
 import { resetStateExample } from '../apiExamples/reset-state';
 import '../src/registered.js';
@@ -22,6 +23,7 @@ export function initExamples(initCount) {
     updateMinDateExample();
     validityExample();
     inDialogExample();
+    inDrawerExample();
     localizationExample();
     resetStateExample();
   } catch (error) {

package/components/datepicker/demo/api.md

@@ -1759,6 +1759,63 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Datepicker in Drawer
+
+The following example demonstrates the use of `<auro-datepicker>` within an `<auro-drawer>` component.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
+  <div>
+    <auro-button id="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
+    <auro-drawer id="datepicker-drawer">
+      <span slot="header">Datepicker in Drawer</span>
+      <div slot="content">
+        <auro-datepicker>
+          <span slot="bib.fullscreen.headline">inDrawer Example</span>
+        </auro-datepicker>
+      </div>
+    </auro-drawer>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
+
+```html
+<div>
+  <auro-button id="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
+  <auro-drawer id="datepicker-drawer">
+    <span slot="header">Datepicker in Drawer</span>
+    <div slot="content">
+      <auro-datepicker>
+        <span slot="bib.fullscreen.headline">inDrawer Example</span>
+      </auro-datepicker>
+    </div>
+  </auro-drawer>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
+
+```js
+export function inDrawerExample() {
+  document.querySelector("#datepicker-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#datepicker-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Restyle Component with CSS Variables
 
 The component may be restyled by changing the values of the following token(s).