@oiz/stzh-components 2.4.0 → 2.5.0-alpha

package/dist/collection/pages/meinkonto.stories.js

@@ -57,75 +57,77 @@ const Base = (args) => (
       <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
     </stzh-page-skiplinks>
 
-    <stzh-header>
-      <img
-        slot="logo"
-        src="media/logo/stzh-default.svg"
-        alt="Logo City Zürich, go to homepage"
-      ></img>
-
-      <nav slot="nav" id="anchorNavMeta">
-        <stzh-visuallyhidden>
-          <h2>Meta Navigation</h2>
-        </stzh-visuallyhidden>
-
-        <stzh-metanav>
-          <stzh-link href="#contact">Contact City Zürich</stzh-link>
-        </stzh-metanav>
-      </nav>
-
-      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
-        <stzh-button
-          fullwidth
-          text-align="space-between"
-          icon-position="right"
-          icon="user"
-        >
-          Full Name
-        </stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
-            Mein Konto
-          </stzh-menu-item>
-          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
+    <div class="stzh-layout-sticky-footer">
+      <stzh-header>
+        <img
+          slot="logo"
+          src="media/logo/stzh-default.svg"
+          alt="Logo City Zürich, go to homepage"
+        ></img>
+
+        <nav slot="nav" id="anchorNavMeta">
+          <stzh-visuallyhidden>
+            <h2>Meta Navigation</h2>
+          </stzh-visuallyhidden>
+
+          <stzh-metanav>
+            <stzh-link href="#contact">Contact City Zürich</stzh-link>
+          </stzh-metanav>
+        </nav>
+
+        <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
+          <stzh-button
+            fullwidth
+            text-align="space-between"
+            icon-position="right"
+            icon="user"
+          >
+            Full Name
+          </stzh-button>
+          <stzh-menu slot="content">
+            <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
+              Mein Konto
+            </stzh-menu-item>
+            <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
+              Settings
+            </stzh-menu-item>
+            <stzh-menu-item href="/about-meinkonto" icon="info-help">
+              About Mein Konto
+            </stzh-menu-item>
+          </stzh-menu>
+          <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
+            Logout
+          </stzh-button>
+        </stzh-popover>
+
+        <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
+          <stzh-link href="#" icon="bulleted-list" active>
+            Services
+          </stzh-link>
+          <stzh-link href="#" badge="3" icon="mail">
+            Messages
+          </stzh-link>
+          <stzh-link href="#" badge="99" icon="reset-time">
+            Activities
+          </stzh-link>
+          <stzh-link href="#" icon="filtering">
             Settings
-          </stzh-menu-item>
-          <stzh-menu-item href="/about-meinkonto" icon="info-help">
-            About Mein Konto
-          </stzh-menu-item>
-        </stzh-menu>
-        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
-          Logout
-        </stzh-button>
-      </stzh-popover>
-
-      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
-        <stzh-link href="#" icon="bulleted-list" active>
-          Services
-        </stzh-link>
-        <stzh-link href="#" badge="3" icon="mail">
-          Messages
-        </stzh-link>
-        <stzh-link href="#" badge="99" icon="reset-time">
-          Activities
-        </stzh-link>
-        <stzh-link href="#" icon="filtering">
-          Settings
-        </stzh-link>
-      </stzh-appnav>
-    </stzh-header>
-
-    <stzh-section id="anchorContent">
-      <stzh-vspace curve="big"></stzh-vspace>
-
-      <stzh-container>
-        {args.content}
-      </stzh-container>
-
-      <stzh-vspace curve="big"></stzh-vspace>
-    </stzh-section>
-
-    <stzh-footer variant="egov"></stzh-footer>
+          </stzh-link>
+        </stzh-appnav>
+      </stzh-header>
+
+      <stzh-section id="anchorContent">
+        <stzh-vspace curve="big"></stzh-vspace>
+
+        <stzh-container>
+          {args.content}
+        </stzh-container>
+
+        <stzh-vspace curve="big"></stzh-vspace>
+      </stzh-section>
+
+      <stzh-footer variant="egov"></stzh-footer>
+    </div>
   </div>
 );
 
@@ -519,4 +521,4 @@ Messages.args = {
 
 export const Activities = TemplateActivities.bind({});
 Activities.args = {
-};
+};

package/dist/collection/pages/microsite.stories.js

@@ -38,19 +38,21 @@ const Base = (args) => (
       <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
     </stzh-page-skiplinks>
 
-    {Header_MetabarOnMobile({ ...Header_MetabarOnMobile.args, _hideText: true })}
+    <div class="stzh-layout-sticky-footer">
+      {Header_MetabarOnMobile({ ...Header_MetabarOnMobile.args, _hideText: true })}
 
-    <stzh-section id="anchorContent">
-      <stzh-container>
-        <stzh-cspace>
-          {args.content}
-        </stzh-cspace>
-      </stzh-container>
+      <stzh-section id="anchorContent">
+        <stzh-container>
+          <stzh-cspace>
+            {args.content}
+          </stzh-cspace>
+        </stzh-container>
 
-      <stzh-vspace curve="big"></stzh-vspace>
-    </stzh-section>
+        <stzh-vspace curve="big"></stzh-vspace>
+      </stzh-section>
 
-    {Footer_Microsite({ ...Footer_Microsite.args })}
+      {Footer_Microsite({ ...Footer_Microsite.args })}
+    </div>
   </div>
 );
 
@@ -69,7 +71,7 @@ const TemplateHomePage = (args) => (
                 {MicrositeTeaserlist_Default({ ...MicrositeTeaserlist_Default.args })}
               </stzh-container>
             </div>
-  
+
             {/* TODO: add Iframe component */}
 
             <div class="section has-richtext">

package/dist/collection/pages/website.stories.js

@@ -31,23 +31,25 @@ const Base = (args) => (
       <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
     </stzh-page-skiplinks>
 
-    {Header_Default({ ...Header_Default.args, _hideText: true })}
+    <div class="stzh-layout-sticky-footer">
+      {Header_Default({ ...Header_Default.args, _hideText: true })}
 
-    <stzh-section id="anchorContent">
-      <stzh-vspace curve="big"></stzh-vspace>
+      <stzh-section id="anchorContent">
+        <stzh-vspace curve="big"></stzh-vspace>
 
-      <stzh-container>
-        <stzh-cspace>
-          {args.content}
-        </stzh-cspace>
-      </stzh-container>
+        <stzh-container>
+          <stzh-cspace>
+            {args.content}
+          </stzh-cspace>
+        </stzh-container>
 
-      <stzh-vspace curve="big"></stzh-vspace>
+        <stzh-vspace curve="big"></stzh-vspace>
 
-      {args.floatingButton && Button_Floating({ ...Button_Floating.args })}
-    </stzh-section>
+        {args.floatingButton && Button_Floating({ ...Button_Floating.args })}
+      </stzh-section>
 
-    {Footer_Default({ ...Footer_Default.args })}
+      {Footer_Default({ ...Footer_Default.args })}
+    </div>
   </div>
 );
 

package/dist/collection/utils/overlay-utils.js

@@ -0,0 +1,15 @@
+export const createBaseFocusTrapOptions = () => {
+  let returnFocusElement = null;
+  return {
+    returnFocusOnDeactivate: true,
+    onActivate: () => {
+      var _a;
+      // some stzh components recreate internal input element when rerendered
+      // to make sure we don't loose reference, we safe reference to the stzh host element
+      returnFocusElement = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest("stzh-dropdown, stzh-input");
+    },
+    setReturnFocus: (node) => {
+      return returnFocusElement || node;
+    }
+  };
+};

package/dist/components/index.d.ts

@@ -9,9 +9,11 @@ export { StzhAppointments as StzhAppointments } from '../types/components/stzh-a
 export { StzhAudio as StzhAudio } from '../types/components/stzh-audio/stzh-audio';
 export { StzhBadge as StzhBadge } from '../types/components/stzh-badge/stzh-badge';
 export { StzhButton as StzhButton } from '../types/components/stzh-button/stzh-button';
+export { StzhButtongroup as StzhButtongroup } from '../types/components/stzh-buttongroup/stzh-buttongroup';
 export { StzhCalendar as StzhCalendar } from '../types/components/stzh-calendar/stzh-calendar';
 export { StzhCard as StzhCard } from '../types/components/stzh-card/stzh-card';
 export { StzhCardList as StzhCardList } from '../types/components/stzh-card-list/stzh-card-list';
+export { StzhCarousel as StzhCarousel } from '../types/components/stzh-carousel/stzh-carousel';
 export { StzhCell as StzhCell } from '../types/components/stzh-cell/stzh-cell';
 export { StzhChart as StzhChart } from '../types/components/stzh-chart/stzh-chart';
 export { StzhCheckbox as StzhCheckbox } from '../types/components/stzh-checkbox/stzh-checkbox';