comand-component-library 3.1.43 → 3.1.46

package/src/documentation/data/componentsDescription.json

@@ -0,0 +1,158 @@
+{
+  "CmdAddressData": {
+    "headline": "Address Data",
+    "shorttext": "Address data in a list and wrapped in a address-tag"
+  },
+  "CmdBackToTopButton": {
+    "headline": "Back-To-Top-Button",
+    "shorttext": "Button at the bottom of the page, to jump back to top"
+  },
+  "CmdBankAccountData": {
+    "headline": "Bank Account Data",
+    "shorttext": "Shows a list with bank data, which can be copied by click"
+  },
+  "CmdBox": {
+    "headline": "Box",
+    "shorttext": "Just a simple box for different types of content (like text, images, user-profiles, products etc.)",
+    "config": {
+      "usesSlot": true,
+      "innerComponents": ["CmdCustomHeadline"]
+    }
+  },
+  "CmdBoxSiteSearch": {
+    "headline": "Box Site Search",
+    "shorttext": "Box with search field to search the content"
+  },
+  "CmdBoxWrapper": {
+    "headline": "Box Wrapper",
+    "shorttext": "Box wrapper for different types of content arranged in a flex- or grid-container"
+  },
+  "CmdBreadcrumbs": {
+    "headline": "Breadcrumbs",
+    "shorttext": "Hierachic navigation, that shows the current page in relation to upper levels. Mostly placed at the top of the content."
+  },
+  "CmdCompanyLogo": {
+    "headline": "Company Logo",
+    "shorttext": "Main logo for the website, that can also be linked to the homepage. Also used in the site-header."
+  },
+  "CmdCookieDisclaimer": {
+    "headline": "Cookie Disclaimer",
+    "shorttext": "The required cookie disclaimer for a web sites. Must show basic information about the used cookies and the possibility to disable not necessary ones."
+  },
+  "CmdCustomHeadline": {
+    "headline": "Custom Headline",
+    "shorttext": "A custom headline, where the h-level can be defined and an optional pre-headline and icon can be set."
+  },
+  "CmdFakeSelect": {
+    "headline": "Fake Select",
+    "shorttext": "A dropdown, that looks like a native selectbox, but can also be filled with different option-types (i.e. checkboxes) or content."
+  },
+  "CmdFancyBox": {
+    "headline": "Fancy Box",
+    "shorttext": "The Fancy Box is a PopUp-Box similar to a modal, that can be filled with different content (i.e. image slider, print preview)."
+  },
+  "CmdForm": {
+    "headline": "Form",
+    "shorttext": "An empty form-wrapper with an optional fieldset and legend, which can be filled with form elements."
+  },
+  "CmdFormElement": {
+    "headline": "Form Elements",
+    "shorttext": "All types of form elements (.ie. inputs, selectboxes, checkboxes, radiobuttons etc.)."
+  },
+  "CmdFormFilters": {
+    "headline": "Form Filters",
+    "shorttext": "List of selected filters (without functionality) that can be set by a form element or a fake select."
+  },
+  "CmdGoogleMaps": {
+    "headline": "Google Maps",
+    "shorttext": "A Google Map in an iframe, that can be linked with an address."
+  },
+  "CmdImageGallery": {
+    "headline": "Image Gallery",
+    "shorttext": "A list if images arranged in a grid. The images can be enlarge in a fancybox."
+  },
+  "CmdImageZoom": {
+    "headline": "Image Zoom",
+    "shorttext": "Shows a movable section of a hovered image in a very large version."
+  },
+  "CmdListOfLinks": {
+    "headline": "List Of Links",
+    "shorttext": "Contains a list of links, mostly used for secondary content (above the header, inside the footer, for pdf-downloads)."
+  },
+  "CmdLoginForm": {
+    "headline": "Login Form",
+    "shorttext": "Shows a standard login form (with username- and password-field) and toggle form to prepare sending the password by email."
+  },
+  "CmdMainNavigation": {
+    "headline": "Main Navigation",
+    "shorttext": "This component should be us to contain the main navigation for a project. Is already wrapped in a nav-tag, that can contain up to three levels of links."
+  },
+  "CmdMultipleSwitch": {
+    "headline": "Multiple Switch",
+    "shorttext": "TEXT FEHLT"
+  },
+  "CmdMultistepFormProgressBar": {
+    "headline": "Multistep Form Progress Bar",
+    "shorttext": "A horizontal progress bar, mostly used for forms, that are separated over multiple pages."
+  },
+  "CmdOpeningHours": {
+    "headline": "Opening Hours",
+    "shorttext": "A list of opening hours with additional options."
+  },
+  "CmdPager": {
+    "headline": "Pager",
+    "shorttext": "Buttons to switch pages, mostly used for list (.i.e. search results) that are displayed of several pages."
+  },
+  "CmdProgressBar": {
+    "headline": "Progress Bar",
+    "shorttext": "Based on a native progress bar, this component can be used with a label and an output of the percentage loaded."
+  },
+  "CmdShareButtons": {
+    "headline": "Share Buttons",
+    "shorttext": "Based on a native progress bar, this component can be used with a label and an output of the percentage loaded."
+  },
+  "CmdSiteHeader": {
+    "headline": "Site Header",
+    "shorttext": "The header for the entire site. It can be configured with the main navigation inside or be filled by slot-elements."
+  },
+  "CmdSlideButton": {
+    "headline": "Slide Button",
+    "shorttext": "Button to slide content (.i.e. images, thumbnails, text) that is used in components like slideshow or thumbnail-scroller."
+  },
+  "CmdSlideshow": {
+    "headline": "Slideshow",
+    "shorttext": "This component is used as an image-slider. It also can load different images for different screen-resolutions."
+  },
+  "CmdSwitchLanguage": {
+    "headline": "Switch Language",
+    "shorttext": "A list with country flags, to symbolize switching languages on a web site."
+  },
+  "CmdSystemMessage": {
+    "headline": "System Message",
+    "shorttext": "A universal message, which can be used for global messages or form validation. It already contains the common cases 'error', 'warning', 'success' and 'info'."
+  },
+  "CmdTable": {
+    "headline": "Table",
+    "shorttext": "Based on a the native table, this table can also be configured to highlight rows or columns and has a default overflow-behavior for wide content."
+  },
+  "CmdTabs": {
+    "headline": "Tabs",
+    "shorttext": "Tabs to switch different section of content, that toggle visibility in frame below."
+  },
+  "CmdThumbnailScroller": {
+    "headline": "Thumbnail scroller",
+    "shorttext": "A horizontal image scroller for small images (thumbnails) that is also used inside if a group of images is enlarged with the fancybox."
+  },
+  "CmdTooltip": {
+    "headline": "Tooltip",
+    "shorttext": "A custom tooltip, that looks like the default tooltip (title) that appears on hovering elements. It also can be filled with customizable content and styled individually."
+  },
+  "CmdUploadForm": {
+    "headline": "Upload form",
+    "shorttext": "Can be used as a complex, configurable form or as a simple drag-and-drop area to prepare the upload of files."
+  },
+  "CmdWidthLimitationWrapper": {
+    "headline": "Width limitation wrapper",
+    "shorttext": "A simple wrapper without content, that can be used to wrap the main content and limit its width on large screens."
+  }
+}

package/src/documentation/generated/CmdAccordionPropertyDescriptions.json

@@ -0,0 +1,57 @@
+{
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    },
+    "useTransition": {
+        "comments": [
+            "use transition to expand accordion-content"
+        ]
+    },
+    "toggleMode": {
+        "comments": [
+            "toggle if mode if only one accordion can be opened (or multiple ones)"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "single, multiple"
+            ]
+        }
+    },
+    "useCustomHeader": {
+        "comments": [
+            "activate if you want to use a customized header"
+        ]
+    },
+    "gapBetween": {
+        "comments": [
+            "set if a gap should be shown between multiple accordions"
+        ]
+    },
+    "accordionData": {
+        "comments": [
+            "all information about the contents in all shown accordions"
+        ]
+    },
+    "iconOpen": {
+        "comments": [
+            "icon to expand an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "iconClosed": {
+        "comments": [
+            "icon to collapse an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "showLabelIcons": {
+        "comments": [
+            "show a label-icon (if exists)"
+        ]
+    },
+    "showLabelTexts": {
+        "comments": [
+            "show a label-text"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    },
+    "showLabels": {
+        "comments": [
+            "option to toggle labels (i.e. telephone, email etc.) in front/left of data"
+        ]
+    },
+    "addressData": {
+        "comments": [
+            "all address-data (incl. labels) that will be shown"
+        ]
+    },
+    "linkGoogleMaps": {
+        "comments": [
+            "link physical address (street, no, zip and city) with Google Maps"
+        ]
+    }
+}

package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json

@@ -0,0 +1,12 @@
+{
+    "iconBackToTop": {
+        "comments": [
+            "icon-class (and shown tooltip on hover) for back to top button"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json

@@ -0,0 +1,34 @@
+{
+    "accountData": {
+        "comments": [
+            "bank account data",
+            "",
+            "must contain: owner, name of bank, IBAN, SWIFT/BIC"
+        ]
+    },
+    "allowCopyByClick": {
+        "comments": [
+            "enable if data can be copied by click on icon"
+        ]
+    },
+    "additionalInformation": {
+        "comments": [
+            "additional information shown in a paragraph below account data"
+        ]
+    },
+    "iconCopy": {
+        "comments": [
+            "icon 'copy'"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -0,0 +1,91 @@
+{
+    "boxType": {
+        "comments": [
+            "set boyType to show different types of boxes/contents"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "content, product, user"
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "collapsible": {
+        "comments": [
+            "activate if box should be collapsible"
+        ]
+    },
+    "useTransition": {
+        "comments": [
+            "use transition to expand and collapse box-body",
+            "",
+            "boyType must be 'content' and 'collapsible' must be activated"
+        ]
+    },
+    "defaultProfileIconClass": {
+        "comments": [
+            "set default profile-icon (will eb shown if no user-image exists)"
+        ]
+    },
+    "product": {
+        "comments": [
+            "the shown product (incl. name, price, image, description)"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===product"
+            ]
+        }
+    },
+    "user": {
+        "comments": [
+            "the shown user-profile (incl. name, image, contact-data)"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===user"
+            ]
+        }
+    },
+    "useSlots": {
+        "comments": [
+            "activated if all content (incl. headline) is given by slot",
+            "",
+            "if false textBody-property must be set"
+        ]
+    },
+    "textBody": {
+        "comments": [
+            "String used as content (placed in a paragraph-tag) for box-body",
+            "",
+            "should only be used, if no further html-structure is required for box-body"
+        ]
+    },
+    "iconOpen": {
+        "comments": [
+            "icon to expand an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "iconClosed": {
+        "comments": [
+            "icon to collapse an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json

@@ -0,0 +1,41 @@
+{
+    "useFilters": {
+        "comments": [
+            "toggle use of filters (must configured)"
+        ]
+    },
+    "listOfFilters": {
+        "comments": [
+            "set list of filters",
+            "",
+            "useFilters-property must be activated"
+        ]
+    },
+    "textLegend": {
+        "comments": [
+            "text for legend"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
+    "showLegend": {
+        "comments": [
+            "toggle legend visibility",
+            "",
+            "textLegend must be set"
+        ]
+    },
+    "results": {
+        "comments": [
+            "send search result from outside to display inside this component"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json

@@ -0,0 +1,47 @@
+{
+    "useRowViewAsDefault": {
+        "comments": [
+            "activate if boxes should be arranged vertically (each box is a row) by default"
+        ]
+    },
+    "allowUserToToggleView": {
+        "comments": [
+            "activate if user can toggle grid- and row-view by himself"
+        ]
+    },
+    "allowTogglingCollapsingBoxes": {
+        "comments": [
+            "activate if user can toggle grid- and row-view by himself"
+        ]
+    },
+    "collapseBoxesIcon": {
+        "comments": [
+            "icon for collapsed box"
+        ]
+    },
+    "expandBoxesIcon": {
+        "comments": [
+            "icon for expanded box"
+        ]
+    },
+    "useFlexbox": {
+        "comments": [
+            "activate if you want to use a flex-container instead of a css-grid-container"
+        ]
+    },
+    "boxesPerRow": {
+        "comments": [
+            "define the number of boxes per row (if view is grid-view)"
+        ]
+    },
+    "iconGridView": {
+        "comments": [
+            "define icon for grid-view"
+        ]
+    },
+    "iconRowView": {
+        "comments": [
+            "define icon for row-view"
+        ]
+    }
+}

package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json

@@ -0,0 +1,17 @@
+{
+    "breadcrumbLabel": {
+        "comments": [
+            "label in front/left of breadcrumbs"
+        ]
+    },
+    "breadcrumbLinks": {
+        "comments": [
+            "list of breadcrumb-links (incl. path, icon and text)"
+        ]
+    },
+    "breadcrumbSeparator": {
+        "comments": [
+            "separator sign between entries"
+        ]
+    }
+}

package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json

@@ -0,0 +1,27 @@
+{
+    "link": {
+        "comments": [
+            "link for company logo (i.e. to homepage)"
+        ]
+    },
+    "pathDefaultLogo": {
+        "comments": [
+            "path to (default) logo-file"
+        ]
+    },
+    "pathDarkmodeLogo": {
+        "comments": [
+            "path to dark-mode logo-file"
+        ]
+    },
+    "altText": {
+        "comments": [
+            "alternative text for image"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json

@@ -0,0 +1,22 @@
+{
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    },
+    "cookieOptions": {
+        "comments": [
+            "list of cookie-options"
+        ]
+    },
+    "buttonLabelAcceptAllCookies": {
+        "comments": [
+            "label for button to accepting all cookies"
+        ]
+    },
+    "buttonLabelAcceptCurrentSettings": {
+        "comments": [
+            "label for button for accepting current settings"
+        ]
+    }
+}

package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json

@@ -0,0 +1,22 @@
+{
+    "headlineText": {
+        "comments": [
+            "text for headline"
+        ]
+    },
+    "headlineLevel": {
+        "comments": [
+            "level for headline"
+        ]
+    },
+    "preHeadlineText": {
+        "comments": [
+            "small pre-headline-text above main-headline"
+        ]
+    },
+    "iconClass": {
+        "comments": [
+            "icon-class for icon shown left/before headline"
+        ]
+    }
+}

package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json

@@ -0,0 +1,79 @@
+{
+    "type": {
+        "comments": [
+            "set different default selectbox-types for"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "default, color, country, checkboxOptions"
+            ]
+        }
+    },
+    "optionLinkType": {
+        "comments": [
+            "set type of option-links"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "href, router"
+            ]
+        }
+    },
+    "modelValue": {
+        "comments": [
+            "set default v-model (must be named modelValue in Vue3)"
+        ]
+    },
+    "selectData": {
+        "comments": [
+            "list of options to select (incl. displayed names and values)",
+            "",
+            "type-property must be set to \"checkboxOptions\""
+        ]
+    },
+    "showSelectAllOptions": {
+        "comments": [
+            "toggles option to (de)select all options in a checkbox-list",
+            "",
+            "type-property must be set to \"checkboxOptions\""
+        ]
+    },
+    "status": {
+        "comments": [
+            "status (i.e. for validation)"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "error, success, disabled"
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "dropdownIcon": {
+        "comments": [
+            "icon for dropdown-icon (i.e. an angle/arrow)"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ],
+            "defaultIcon": [
+                "icon-single-arrow-down"
+            ]
+        }
+    },
+    "labelText": {
+        "comments": [
+            "label-text for fake-select",
+            "",
+            " @requiredForAccessibility: true"
+        ]
+    },
+    "pathFlags": {
+        "comments": [
+            "path to flag-files (will be combined with flag isoCode to load svg)"
+        ]
+    }
+}