@oiz/stzh-components 2.0.0 → 2.1.0-alpha

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ import { StzhLocaleFormats } from './utils/translation-utils';
 export declare type WindowStzhComponents = {
   version: string;
   locale: string;
+  pathMedia: string;
   pathTranslations: string;
   cacheTranslations: boolean;
   formats: StzhLocaleFormats;
@@ -12,6 +13,7 @@ declare global {
     stzhComponents: WindowStzhComponents;
     ReadSpeaker: any;
     rspkr: any;
+    proj4: any;
   }
 }
 export declare type StzhSortableUpdateEvent = {
@@ -25,6 +27,47 @@ export declare type StzhSortableDisableEvent = {
   component: "stzh-sortable";
   disabled: boolean;
 };
+export declare type OlmapLayer = {
+  title?: string;
+  thumbnailUrl: string;
+  options: {
+    url: string;
+    layer: string;
+    matrixSet: string;
+    origin: number[];
+    extent: number[];
+  };
+};
+export declare type StzhOlmapInitializedEvent = {
+  component: "stzh-olmap";
+};
+export declare type StzhOlmapPostRenderEvent = {
+  component: "stzh-olmap";
+};
+export declare type StzhOlmapMoveStartEvent = {
+  component: "stzh-olmap";
+};
+export declare type StzhOlmapMoveEndEvent = {
+  component: "stzh-olmap";
+};
+export declare type StzhStickyStuckTopEvent = {
+  component: "stzh-sticky";
+  sticky: boolean;
+};
+export declare type StzhStickyStuckBottomEvent = {
+  component: "stzh-sticky";
+  sticky: boolean;
+};
+export declare type StzhAnchornavItem = {
+  label: string;
+  href?: string;
+  icon?: string;
+};
+export declare type StzhAnchornavItemClickEvent = {
+  component: "stzh-anchornav";
+  item: StzhAnchornavItem;
+  originalEvent: MouseEvent;
+};
 export declare type StzhActionsetItem = {
   id: string;
   label?: string;
@@ -42,6 +85,29 @@ export declare type StzhActionsetItem = {
 export declare type StzhActionsetItemClickEvent = {
   component: "stzh-actionset";
   action: StzhActionsetItem;
+  originalEvent: MouseEvent;
+};
+export declare type StzhAudioPlayEvent = {
+  component: "stzh-audio";
+};
+export declare type StzhAudioPlayingEvent = {
+  component: "stzh-audio";
+};
+export declare type StzhAudioPauseEvent = {
+  component: "stzh-audio";
+};
+export declare type StzhAudioReplayEvent = {
+  component: "stzh-audio";
+};
+export declare type StzhAudioEndEvent = {
+  component: "stzh-audio";
+};
+export declare type StzhAudioEndedEvent = {
+  component: "stzh-audio";
+};
+export declare type StzhAudioErrorEvent = {
+  component: "stzh-audio";
+  originalEvent: ErrorEvent;
 };
 export declare type StzhCardHeaderAction = {
   id: string;

package/dist/types/stencil-public-runtime.d.ts

@@ -221,7 +221,9 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,29 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +284,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +293,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**

package/dist/vscode-data.json

@@ -130,16 +130,16 @@
       "name": "stzh-actionset",
       "description": {
         "kind": "markdown",
-        "value": "The STZH actions component.\n\nAutomatically position given buttons inside a form, dialog or process. Sets `variant=\"secondary\"` to `stzh-button` elements placed in secondary slot by default if nothing else is set."
+        "value": "The STZH actionset component.\n\nWill automatically hide passed `actions` (buttons) that have not enough horizontal space."
       },
       "attributes": [
         {
           "name": "actions",
-          "description": "Card header actions"
+          "description": "Card header actions.\nArray of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n`[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`"
         },
         {
           "name": "popover-button-size",
-          "description": "Popover button size",
+          "description": "Button size of popover button (button that holds collapsed actions)",
           "values": [
             {
               "name": "default"
@@ -154,7 +154,7 @@
         },
         {
           "name": "popover-button-variant",
-          "description": "Popover button variant",
+          "description": "Button variant of popover button (button thats holds collapsed actions)",
           "values": [
             {
               "name": "default"
@@ -172,7 +172,7 @@
         },
         {
           "name": "popover-placement",
-          "description": "Popover placement",
+          "description": "Popover placement of button that holds collapsed actions",
           "values": [
             {
               "name": "bottom"
@@ -226,6 +226,43 @@
         }
       ]
     },
+    {
+      "name": "stzh-anchornav",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH anchornav component.\n\n```html\n<stzh-anchornav\n  items='[\n    {\n      \"label\": \"Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.\",\n      \"href\": \"#laboris\"\n    },\n    {\n      \"label\": \"Lorem Ipsum\",\n      \"href\": \"#lorem\"\n    },\n    {\n      \"label\": \"Lorem Ipsum\",\n      \"href\": \"#lorem\"\n    },\n    {\n      \"label\": \"Lorem Ipsum\",\n      \"href\": \"#lorem\"\n    },\n    {\n      \"label\": \"Lorem Ipsum\",\n      \"href\": \"#lorem\"\n    },\n    {\n      \"label\": \"Lorem Ipsum\",\n      \"href\": \"#lorem\"\n    },\n    {\n      \"label\": \"Lorem Ipsum\",\n      \"href\": \"#lorem\"\n    }\n  ]'\n></stzh-anchornav>\n```"
+      },
+      "attributes": [
+        {
+          "name": "columns",
+          "description": "Columns number"
+        },
+        {
+          "name": "columns-large",
+          "description": "Columns number above large breakpoint"
+        },
+        {
+          "name": "columns-medium",
+          "description": "Columns number above medium breakpoint"
+        },
+        {
+          "name": "columns-small",
+          "description": "Columns number above small breakpoint"
+        },
+        {
+          "name": "columns-ultra",
+          "description": "Columns number above ultra breakpoint"
+        },
+        {
+          "name": "items",
+          "description": "Initial selected values.\nArray of objects with `label`, `href` and `icon` attribute:\n`[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\"}]`"
+        },
+        {
+          "name": "with-border",
+          "description": "With border separator"
+        }
+      ]
+    },
     {
       "name": "stzh-appnav",
       "description": {
@@ -300,6 +337,42 @@
         }
       ]
     },
+    {
+      "name": "stzh-audio",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH audio component.\n\nInternally, the [`vidstack` library](https://www.vidstack.io/) is used."
+      },
+      "attributes": [
+        {
+          "name": "preload",
+          "description": "Preload strategy",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "metadata"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "src",
+          "description": "Path to audio file"
+        },
+        {
+          "name": "transcript",
+          "description": "Transcript text (alternative for slot)"
+        },
+        {
+          "name": "transcript-shown",
+          "description": "Whether transcript should be shown"
+        }
+      ]
+    },
     {
       "name": "stzh-badge",
       "description": {
@@ -847,6 +920,10 @@
           "name": "name",
           "description": "The name of the input checkbox elements"
         },
+        {
+          "name": "prevent-update-properties",
+          "description": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid)"
+        },
         {
           "name": "show-marker",
           "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
@@ -1001,6 +1078,35 @@
         }
       ]
     },
+    {
+      "name": "stzh-clamp",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH clamp component.\n\n```html\n<stzh-clamp>Long text o clamp</stzh-clamp>\n```"
+      },
+      "attributes": [
+        {
+          "name": "lines",
+          "description": "Line number"
+        },
+        {
+          "name": "lines-large",
+          "description": "Line number above large breakpoint"
+        },
+        {
+          "name": "lines-medium",
+          "description": "Line number above medium breakpoint"
+        },
+        {
+          "name": "lines-small",
+          "description": "Line number above small breakpoint"
+        },
+        {
+          "name": "lines-ultra",
+          "description": "Line number above ultra breakpoint"
+        }
+      ]
+    },
     {
       "name": "stzh-container",
       "description": {
@@ -2377,6 +2483,10 @@
           "name": "disabled",
           "description": "Disabled status"
         },
+        {
+          "name": "fullwidth",
+          "description": "Whether the link is full width"
+        },
         {
           "name": "href",
           "description": "href attribute of the link"
@@ -2428,6 +2538,27 @@
           "name": "target",
           "description": "target if the button is used as link (if href used)"
         },
+        {
+          "name": "text-align",
+          "description": "Text alignment",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "space-between"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "type of the button, if used as button (if no href used)",
@@ -2664,6 +2795,51 @@
       },
       "attributes": []
     },
+    {
+      "name": "stzh-olmap",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH olmap component."
+      },
+      "attributes": [
+        {
+          "name": "center-marker",
+          "description": "Whether to display an icon marker in the center"
+        },
+        {
+          "name": "hostname",
+          "description": "Hostname"
+        },
+        {
+          "name": "layer",
+          "description": "Active layer (`streets` or `satellite` can be used with default `layers` prop value)"
+        },
+        {
+          "name": "layer-control",
+          "description": "Whether map layer switch control is shown"
+        },
+        {
+          "name": "layers",
+          "description": "Layers (maximum of two).\n\nDefault layers `streets` and `satellite` are defined.\nIf `streets` or `satellite` is used as key, they will have a default filled `title`."
+        },
+        {
+          "name": "location-control",
+          "description": "Whether map should have a location control"
+        },
+        {
+          "name": "print-control",
+          "description": "Whether map should be printable"
+        },
+        {
+          "name": "scale-control",
+          "description": "Whether map scale should be shown"
+        },
+        {
+          "name": "zoom",
+          "description": "Zoom"
+        }
+      ]
+    },
     {
       "name": "stzh-overlay",
       "description": {
@@ -2796,7 +2972,7 @@
       "name": "stzh-portal-mitwirken",
       "description": {
         "kind": "markdown",
-        "value": "This component is only intended for the mitwirken.stadt-zuerich.ch portal.\nIt introduces global CSS for the page components of the Decidim tool."
+        "value": "This component is only intended for styling the [mitwirken.stadt-zuerich.ch](https://mitwirken.stadt-zuerich.ch/) portal.\n\nIt introduces global CSS for the page components of the Decidim tool.\nCurrently the CSS has to be copied from the bundled JS file to the Decidim \"Custom Styles\" page.\nThe CSS will be output in the console and can be copied there. Paste it then into the \"Custom Styles\" admin page.\n\n* INTEG URL: https://mitwirken.integ.stadt-zuerich.ch/?locale=de\n* INTEG VBZ Example Process Page: https://mitwirken.integ.stadt-zuerich.ch/processes/VBZ?locale=de\n* INTEG VBZ Example Process Admin Page: https://mitwirken.integ.stadt-zuerich.ch/admin/participatory_processes/VBZ/edit?locale=de\n* INTEG \"Custom Styles\" Admin Page: https://mitwirken.integ.stadt-zuerich.ch/admin/decidim_awesome/config/styles?locale=de"
       },
       "attributes": []
     },
@@ -2990,6 +3166,10 @@
           "name": "name",
           "description": "The name of the input radio elements"
         },
+        {
+          "name": "prevent-update-properties",
+          "description": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker)"
+        },
         {
           "name": "required",
           "description": "Required status"
@@ -3274,6 +3454,23 @@
         }
       ]
     },
+    {
+      "name": "stzh-sticky",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH sticky component.\n\nMakes slotted content sticky with help of `position: sticky` and adds additional events when element gets stucked. To make it work, parent elements are not allowed to have a overflow set to `auto`, `hidden` or `scroll`.\n\nWhen element is stuck `is-stuck` attribute will be added to the host element. Additionally `is-stuck-top` or `is-stuck-bottom` will be added."
+      },
+      "attributes": [
+        {
+          "name": "disable-sticky-bottom",
+          "description": "Whether to disable sticking to bottom"
+        },
+        {
+          "name": "disable-sticky-top",
+          "description": "Whether to disable sticking to top"
+        }
+      ]
+    },
     {
       "name": "stzh-table",
       "description": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oiz/stzh-components",
-    "version": "2.0.0",
+    "version": "2.1.0-alpha",
     "description": "STZH Web Components Library",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -74,13 +74,18 @@
     "license": "MIT",
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
-        "@stencil/core": "^2.18.0",
+        "@stencil/core": "^2.20.0",
+        "@vidstack/player": "^1.6.5",
         "axios": "^0.27.2",
         "body-scroll-lock": "^3.1.3",
         "dropzone": "^5.9.3",
         "flexsearch": "^0.7.21",
         "focus-trap": "^7.0.0",
+        "hls.js": "^1.2.9",
         "js-cookie": "^3.0.1",
+        "lit": "^2.5.0",
+        "ol": "^4.6.5",
+        "proj4": "^2.4.4",
         "scroll-into-view-if-needed": "^2.2.29",
         "sortablejs": "^1.15.0",
         "tabbable": "^6.0.0",