@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/interface/component/component:syn-file.md

@@ -0,0 +1,280 @@
+# syn-file
+
+## Summary
+
+File controls allow selecting an arbitrary number of files for uploading.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-271865)
+
+## Class Information
+
+- **Tag Name:** `syn-file`
+- **Import Example:** `import SynFile from '@synergy-design-system/components/components/file/file.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** unknown
+
+## Available Slots
+
+- `label`: The file control's label. Alternatively, you can use the `label` attribute.
+- `help-text`: Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.
+- `droparea-icon`: Optional droparea icon to use instead of the default. Works best with `<syn-icon>`.
+- `trigger`: Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: _label_, _droparea_, _help-text_, _size_, _hide-value_. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.
+
+## Available Properties
+
+### accept
+
+attribute: `accept`
+reflects: no
+type: `string`
+default: `''`
+
+Comma separated list of supported file types [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+
+### capture
+
+attribute: `capture`
+reflects: no
+type: `'user' | 'environment'`
+default: none
+
+Specifies the types of files that the server accepts. Can be set either to user or environment. Works only when not using a droparea! [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+
+### defaultValue
+
+attribute: -
+reflects: -
+type: `string`
+default: `''`
+
+The default value of the form control. Primarily used for resetting the form control.
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables the file control.
+
+### droparea
+
+attribute: `droparea`
+reflects: no
+type: `boolean`
+default: `false`
+
+Draw the file control as a drop area
+
+### files
+
+attribute: `files`
+reflects: no
+type: `undefined`
+default: none
+
+The selected files as a FileList object containing a list of File objects. The FileList behaves like an array, so you can get the number of selected files via its length property. [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)
+
+### form
+
+attribute: `form`
+reflects: yes
+type: `string`
+default: `''`
+
+By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
+
+### helpText
+
+attribute: `help-text`
+reflects: no
+type: `string`
+default: `''`
+
+The file control's help text. If you need to display HTML, use the `help-text` slot instead.
+
+### hideValue
+
+attribute: `hide-value`
+reflects: no
+type: `boolean`
+default: `false`
+
+Suppress the value from being displayed in the file control
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+The file control's label. If you need to display HTML, use the `label` slot instead.
+
+### multiple
+
+attribute: `multiple`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates whether the user can select more than one file. Has no effect if webkitdirectory is set. [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+
+### name
+
+attribute: `name`
+reflects: no
+type: `string`
+default: `''`
+
+The name of the file control, submitted as a name/value pair with form data.
+
+### readonly
+
+attribute: `readonly`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Sets the file control to a readonly state.
+
+### required
+
+attribute: `required`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Makes the input a required field.
+
+### size
+
+attribute: `size`
+reflects: yes
+type: `'small' | 'medium' | 'large'`
+default: `'medium'`
+
+The file control's size.
+
+### value
+
+attribute: `value`
+reflects: no
+type: `undefined`
+default: none
+
+The value of the file control contains a string that represents the path of the selected file. If multiple files are selected, the value represents the first file in the list. If no file is selected, the value is an empty string. Beware that the only valid value when setting a file control is an empty string! [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)
+
+### webkitdirectory
+
+attribute: `webkitdirectory`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates that the file control should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. Note: This is a non-standard attribute but is supported in the major browsers. [see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+
+## Available Methods
+
+### blur()
+
+parameters: -
+returns: `void`
+
+Removes focus from the button or droparea.
+
+### checkValidity()
+
+parameters: -
+returns: `void`
+
+Checks for validity but does not show a validation message.
+Returns `true` when valid and `false` when invalid.
+
+### focus()
+
+parameters: `options: FocusOptions`
+returns: `void`
+
+Sets focus on the button or droparea.
+
+### getForm()
+
+parameters: -
+returns: `void`
+
+Gets the associated form, if one exists.
+
+### reportValidity()
+
+parameters: -
+returns: `void`
+
+Checks for validity and shows the browser's validation message if the control is invalid.
+
+### setCustomValidity()
+
+parameters: `message: string`
+returns: `void`
+
+Sets a custom validation message. Pass an empty string to restore validity.
+
+## Available CSS Parts
+
+- `button`: The syn-button acting as a file input.
+- `button__base`: The syn-button's exported `base` part.
+- `button-wrapper`: The wrapper around the button and text value.
+- `droparea`: The element wrapping the drop zone.
+- `droparea-background`: The background of the drop zone.
+- `droparea-icon`: The container that wraps the icon for the drop zone.
+- `droparea-value`: The text for the drop zone.
+- `form-control`: The form control that wraps the label, input, and help text.
+- `form-control-help-text`: The help text's wrapper.
+- `form-control-input`: The input's wrapper.
+- `form-control-label`: The label's wrapper.
+- `trigger`: The container that wraps the trigger.
+- `value`: The chosen files or placeholder text for the file input.
+
+## Available Events
+
+### syn-blur
+
+type: `SynBlurEvent`
+
+Emitted when the control loses focus.
+
+### syn-change
+
+type: `SynChangeEvent`
+
+Emitted when an alteration to the control's value is committed by the user.
+
+### syn-error
+
+type: `SynErrorEvent`
+
+Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
+
+### syn-focus
+
+type: `SynFocusEvent`
+
+Emitted when the control gains focus.
+
+### syn-input
+
+type: `SynInputEvent`
+
+Emitted when the control receives input.
+
+## Dependencies
+
+- `syn-button`
+- `syn-icon`

package/data/layers/interface/component/component:syn-header.json

@@ -0,0 +1,149 @@
+{
+  "attributes": [
+    {
+      "default": "'hidden'",
+      "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in\nvariant=\"default\".\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+      "fieldName": "burgerMenu",
+      "name": "burger-menu",
+      "reflects": true,
+      "type": "'hidden' | 'open' | 'closed'"
+    },
+    {
+      "default": "''",
+      "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
+      "fieldName": "label",
+      "name": "label",
+      "reflects": false,
+      "type": "string"
+    },
+    {
+      "default": "false",
+      "description": "Makes the header stick to the top of the viewport when scrolling.\nAlso applies a shadow to the header when scrolling.",
+      "fieldName": "sticky",
+      "name": "sticky",
+      "reflects": true,
+      "type": "boolean"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper",
+      "name": "base"
+    },
+    {
+      "description": "The button that toggles the burger menu",
+      "name": "burger-menu-toggle-button"
+    },
+    {
+      "description": "The wrapper most content items reside",
+      "name": "content"
+    },
+    {
+      "description": "The element wrapping the application name",
+      "name": "label"
+    },
+    {
+      "description": "The wrapper the application logo resides in",
+      "name": "logo"
+    },
+    {
+      "description": "The Item wrapping the optional application menu",
+      "name": "meta-navigation"
+    },
+    {
+      "description": "The wrapper that is holding the optional top navigation section",
+      "name": "navigation"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs",
+  "events": [
+    {
+      "description": "Emitted when the burger menu is toggled to closed",
+      "name": "syn-burger-menu-closed",
+      "type": "SynBurgerMenuClosedEvent"
+    },
+    {
+      "description": "Emitted when the burger menu is toggled to hidden",
+      "name": "syn-burger-menu-hidden",
+      "type": "SynBurgerMenuHiddenEvent"
+    },
+    {
+      "description": "Emitted when the burger menu is toggled to open",
+      "name": "syn-burger-menu-open",
+      "type": "SynBurgerMenuOpenEvent"
+    }
+  ],
+  "figmaComponentId": "41163-318668",
+  "methods": [
+    {
+      "description": "Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation\nlike showing the burger menu icon and open / close handling.\n\nIf no side navigation is connected, the header will use the first `syn-side-nav` element it\nfinds.",
+      "name": "connectSideNavigation",
+      "parameters": [
+        {
+          "name": "sideNav",
+          "type": "SynSideNav | null"
+        }
+      ]
+    },
+    {
+      "description": "",
+      "name": "handleBurgerMenu",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "'hidden'",
+      "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in\nvariant=\"default\".\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+      "name": "burgerMenu",
+      "type": "'hidden' | 'open' | 'closed'"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Makes the header stick to the top of the viewport when scrolling.\nAlso applies a shadow to the header when scrolling.",
+      "name": "sticky",
+      "type": "boolean"
+    }
+  ],
+  "since": "1.10.0",
+  "slots": [
+    {
+      "description": "The label for the header",
+      "name": "label"
+    },
+    {
+      "description": "The logo that should be displayed. Will fall back to the SICK logo if not provided",
+      "name": "logo"
+    },
+    {
+      "description": "The meta-navigation is used to add various application toolbar icons Best used with `<syn-icon-button />` and `<syn-drop-down />`",
+      "name": "meta-navigation"
+    },
+    {
+      "description": "This slot can be used to add an optional horizontal navigation",
+      "name": "navigation"
+    },
+    {
+      "description": "An icon to use in lieu of the default burger-menu=open state. The default close icon is a 'x'.",
+      "name": "open-burger-menu-icon"
+    },
+    {
+      "description": "An icon to use in lieu of the default burger-menu=closed state. The default open icon is a burger menu.",
+      "name": "closed-burger-menu-icon"
+    }
+  ],
+  "sourceModulePath": "components/header/header.js",
+  "status": "stable",
+  "summary": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.",
+  "tagName": "syn-header"
+}

package/data/layers/interface/component/component:syn-header.md

@@ -0,0 +1,102 @@
+# syn-header
+
+## Summary
+
+The <syn-header /> element provides a generic application header
+that can be used to add applications name, toolbar and primary navigation.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-318668)
+
+## Class Information
+
+- **Tag Name:** `syn-header`
+- **Import Example:** `import SynHeader from '@synergy-design-system/components/components/header/header.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 1.10.0
+
+## Available Slots
+
+- `label`: The label for the header
+- `logo`: The logo that should be displayed. Will fall back to the SICK logo if not provided
+- `meta-navigation`: The meta-navigation is used to add various application toolbar icons Best used with `<syn-icon-button />` and `<syn-drop-down />`
+- `navigation`: This slot can be used to add an optional horizontal navigation
+- `open-burger-menu-icon`: An icon to use in lieu of the default burger-menu=open state. The default close icon is a 'x'.
+- `closed-burger-menu-icon`: An icon to use in lieu of the default burger-menu=closed state. The default open icon is a burger menu.
+
+## Available Properties
+
+### burgerMenu
+
+attribute: `burger-menu`
+reflects: yes
+type: `'hidden' | 'open' | 'closed'`
+default: `'hidden'`
+
+Defines the current visibility and icon of the burger-menu icon. The menu button is added automatically if the component finds a syn-side-nav in variant="default". The following values can be used: - hidden: The burger menu is not visible - open: The burger menu is visible and shows the close icon - closed: The burger menu is visible and shows the open icon
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+The headers label. If you need to display HTML, use the `label` slot instead.
+
+### sticky
+
+attribute: `sticky`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Makes the header stick to the top of the viewport when scrolling. Also applies a shadow to the header when scrolling.
+
+## Available Methods
+
+### connectSideNavigation()
+
+parameters: `sideNav: SynSideNav | null`
+returns: `void`
+
+Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation
+like showing the burger menu icon and open / close handling.
+
+If no side navigation is connected, the header will use the first `syn-side-nav` element it
+finds.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper
+- `burger-menu-toggle-button`: The button that toggles the burger menu
+- `content`: The wrapper most content items reside
+- `label`: The element wrapping the application name
+- `logo`: The wrapper the application logo resides in
+- `meta-navigation`: The Item wrapping the optional application menu
+- `navigation`: The wrapper that is holding the optional top navigation section
+
+## Available Events
+
+### syn-burger-menu-closed
+
+type: `SynBurgerMenuClosedEvent`
+
+Emitted when the burger menu is toggled to closed
+
+### syn-burger-menu-hidden
+
+type: `SynBurgerMenuHiddenEvent`
+
+Emitted when the burger menu is toggled to hidden
+
+### syn-burger-menu-open
+
+type: `SynBurgerMenuOpenEvent`
+
+Emitted when the burger menu is toggled to open