@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

package/dist/vscode-data.json

@@ -25,6 +25,39 @@
         "value": "The STZH accordion item component."
       },
       "attributes": [
+        {
+          "name": "badge",
+          "description": "Badge"
+        },
+        {
+          "name": "badge-empty",
+          "description": "Whether badge should be displayed empty"
+        },
+        {
+          "name": "badge-type",
+          "description": "Badge type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "description",
+          "description": "Description"
+        },
         {
           "name": "disabled",
           "description": "Whether fold disabled"
@@ -51,6 +84,10 @@
             }
           ]
         },
+        {
+          "name": "icon",
+          "description": "Icon (use instead of icon slot)"
+        },
         {
           "name": "open",
           "description": "Whether fold is open"
@@ -93,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"
@@ -117,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"
@@ -135,7 +172,7 @@
         },
         {
           "name": "popover-placement",
-          "description": "Popover placement",
+          "description": "Popover placement of button that holds collapsed actions",
           "values": [
             {
               "name": "bottom"
@@ -189,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": {
@@ -263,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": {
@@ -273,6 +383,27 @@
         {
           "name": "label",
           "description": "Text content of the badge"
+        },
+        {
+          "name": "type",
+          "description": "Type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
         }
       ]
     },
@@ -299,6 +430,10 @@
           "name": "badge",
           "description": "Display a badge aligned to button or icons"
         },
+        {
+          "name": "badge-empty",
+          "description": "Whether badge should be displayed empty"
+        },
         {
           "name": "badge-position",
           "description": "Badge position",
@@ -311,6 +446,27 @@
             }
           ]
         },
+        {
+          "name": "badge-type",
+          "description": "Badge type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
         {
           "name": "checked",
           "description": "Checked status (if type is radio)"
@@ -499,7 +655,7 @@
         },
         {
           "name": "footer-actions",
-          "description": "Card footer actions"
+          "description": "Card footer actions.\nThe [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\nYou can listen to clicks with the `stzhActionClick` event."
         },
         {
           "name": "header-actions",
@@ -519,7 +675,7 @@
         },
         {
           "name": "hide-movement-actions",
-          "description": "Whether movement menu items should be shown"
+          "description": "Whether movement menu items should be shown.\nHas no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true."
         },
         {
           "name": "name",
@@ -531,11 +687,11 @@
         },
         {
           "name": "sortable-disabled",
-          "description": "Whether sorting should be disabled"
+          "description": "Whether sorting should be disabled.\nHas no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true."
         },
         {
           "name": "starrable",
-          "description": "Whether card star is displayed"
+          "description": "Whether card star is displayed (with tooltip and menu-item in mobile popover).\nThe tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`)."
         },
         {
           "name": "starred",
@@ -549,18 +705,6 @@
           "name": "subtitle-interactive",
           "description": "Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click"
         },
-        {
-          "name": "type",
-          "description": "Type",
-          "values": [
-            {
-              "name": "alert"
-            },
-            {
-              "name": "default"
-            }
-          ]
-        },
         {
           "name": "value",
           "description": "The value of the input element (if card is selectable)"
@@ -583,8 +727,8 @@
           "description": "HTML attribute that is used by the `toArray()` of sortable method"
         },
         {
-          "name": "sortable-disabled",
-          "description": "Whether sorting should be disabled"
+          "name": "sortable-enabled",
+          "description": "Whether sorting should be enabled"
         }
       ]
     },
@@ -776,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"
@@ -793,6 +941,14 @@
         "value": "The STZH chip component."
       },
       "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the button"
+        },
+        {
+          "name": "a11y-label",
+          "description": "Accessible label for screen readers to replace visible text"
+        },
         {
           "name": "active",
           "description": "Active"
@@ -876,20 +1032,81 @@
         "value": "The STZH figure component."
       },
       "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
         {
           "name": "data",
           "description": "Data"
         },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
         {
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "name",
+          "description": "The name of the input element"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
         {
           "name": "value",
           "description": "Value"
         }
       ]
     },
+    {
+      "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": {
@@ -2225,6 +2442,10 @@
           "name": "badge",
           "description": "Badge text"
         },
+        {
+          "name": "badge-empty",
+          "description": "Whether badge should be displayed empty"
+        },
         {
           "name": "badge-position",
           "description": "Badge position",
@@ -2237,10 +2458,35 @@
             }
           ]
         },
+        {
+          "name": "badge-type",
+          "description": "Badge type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
         {
           "name": "disabled",
           "description": "Disabled status"
         },
+        {
+          "name": "fullwidth",
+          "description": "Whether the link is full width"
+        },
         {
           "name": "href",
           "description": "href attribute of the link"
@@ -2292,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)",
@@ -2430,6 +2697,31 @@
           "name": "badge",
           "description": "Badge"
         },
+        {
+          "name": "badge-empty",
+          "description": "Whether badge should be displayed empty"
+        },
+        {
+          "name": "badge-type",
+          "description": "Badge type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
         {
           "name": "disabled",
           "description": "Whether the button is disabled"
@@ -2503,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": {
@@ -2635,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": []
     },
@@ -2829,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"
@@ -2864,7 +3205,7 @@
       "name": "stzh-richtext",
       "description": {
         "kind": "markdown",
-        "value": "The STZH richtext component.\n\nThis component styles (colors, fonts, spacings) the slotted text elements `hX`, `p`, `i`, `b`, `strong`, `em`, `ul`, `ol`, `blockquote` and `a` (icon are added to external links) and adds spacings to the components `stzh-text` and `stzh-heading`.\n\nThis is especially useful when the content is coming from a WYSIWYG editor within a CMS."
+        "value": "The STZH richtext component.\n\nThis component styles (colors, fonts, spacings) the slotted elements `hX`, `p`, `i`, `b`, `strong`, `em`, `ul`, `ol`, `blockquote`, `table` and `a` (icon are added to external links) and adds spacings to the components `stzh-text` and `stzh-heading`.\n\nThis is especially useful when the content is coming from a WYSIWYG editor within a CMS."
       },
       "attributes": [
         {
@@ -3113,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-beta",
+    "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",