npm - @scania/tegel - Versions diffs - 0.0.4 → 0.0.5 - Mend

@scania/tegel 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (745) hide show

package/dist/collection/components/dropdown/dropdown.css CHANGED Viewed

@@ -111,7 +111,6 @@
   --sdds-dropdown-color: var(--sdds-grey-958);
   --sdds-dropdown-background: var(--sdds-grey-50);
   --sdds-dropdown-background-hover: var(--sdds-grey-100);
-  --sdds-dropdown-background-disabled: var(--sdds-white);
   --sdds-dropdown-disabled: var(--sdds-grey-400);
   --sdds-dropdown-border: var(--sdds-grey-100);
   --sdds-dropdown-label-inside: var(--sdds-grey-700);
@@ -125,11 +124,13 @@
 .sdds-mode-light .sdds-mode-variant-primary {
   --sdds-dropdown-background: var(--sdds-grey-50);
   --sdds-dropdown-background-hover: var(--sdds-grey-100);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-50);
 }
 :root .sdds-mode-variant-secondary,
 .sdds-mode-light .sdds-mode-variant-secondary {
   --sdds-dropdown-background: var(--sdds-white);
   --sdds-dropdown-background-hover: var(--sdds-grey-50);
+  --sdds-dropdown-background-disabled: var(--sdds-white);
 }
 .sdds-mode-dark {
@@ -150,10 +151,12 @@
 .sdds-mode-dark .sdds-mode-variant-primary {
   --sdds-dropdown-background: var(--sdds-grey-868);
   --sdds-dropdown-background-hover: var(--sdds-grey-800);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-868);
 }
 .sdds-mode-dark .sdds-mode-variant-secondary {
   --sdds-dropdown-background: var(--sdds-grey-900);
   --sdds-dropdown-background-hover: var(--sdds-grey-800);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
 }
 .sdds-dropdown-helper {
@@ -290,164 +293,6 @@
   --sdds-detail-ex-07-ls: 0;
 }
-:root,
-.sdds-mode-light {
-  /* This one is overriding the --sdds-link css for the link component. */
-  --sdds-link-text-decoration: none;
-  --sdds-dropdown-color: var(--sdds-grey-958);
-  --sdds-dropdown-background: var(--sdds-grey-50);
-  --sdds-dropdown-background-hover: var(--sdds-grey-100);
-  --sdds-dropdown-background-disabled: var(--sdds-white);
-  --sdds-dropdown-disabled: var(--sdds-grey-400);
-  --sdds-dropdown-border: var(--sdds-grey-100);
-  --sdds-dropdown-label-inside: var(--sdds-grey-700);
-  --sdds-dropdown-label-outside: var(--sdds-grey-958);
-  --sdds-dropdown-placeholder: var(--sdds-grey-700);
-  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
-  --sdds-dropdown-option-color: var(--sdds-grey-900);
-  --sdds-dropdown-option-disabled-color: var(--sdds-grey-400);
-}
-:root .sdds-mode-variant-primary,
-.sdds-mode-light .sdds-mode-variant-primary {
-  --sdds-dropdown-background: var(--sdds-grey-50);
-  --sdds-dropdown-background-hover: var(--sdds-grey-100);
-}
-:root .sdds-mode-variant-secondary,
-.sdds-mode-light .sdds-mode-variant-secondary {
-  --sdds-dropdown-background: var(--sdds-white);
-  --sdds-dropdown-background-hover: var(--sdds-grey-50);
-}
-.sdds-mode-dark {
-  --sdds-link-text-decoration: none;
-  --sdds-dropdown-color: var(--sdds-grey-400);
-  --sdds-dropdown-background: var(--sdds-grey-868);
-  --sdds-dropdown-background-hover: var(--sdds-grey-800);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
-  --sdds-dropdown-disabled: var(--sdds-grey-800);
-  --sdds-dropdown-border: var(--sdds-grey-800);
-  --sdds-dropdown-label-inside: var(--sdds-grey-400);
-  --sdds-dropdown-label-outside: var(--sdds-grey-100);
-  --sdds-dropdown-placeholder: var(--sdds-grey-400);
-  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
-  --sdds-dropdown-option-color: var(--sdds-grey-50);
-  --sdds-dropdown-option-disabled-color: var(--sdds-grey-800);
-}
-.sdds-mode-dark .sdds-mode-variant-primary {
-  --sdds-dropdown-background: var(--sdds-grey-868);
-  --sdds-dropdown-background-hover: var(--sdds-grey-800);
-}
-.sdds-mode-dark .sdds-mode-variant-secondary {
-  --sdds-dropdown-background: var(--sdds-grey-900);
-  --sdds-dropdown-background-hover: var(--sdds-grey-800);
-}
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
 :root,
 .sdds-mode-light {
   --sdds-checkbox-color: var(--sdds-grey-900);
@@ -597,11 +442,11 @@
   cursor: not-allowed;
   caret-color: transparent;
   pointer-events: none;
-  color: var(--sdds-grey-400);
+  color: var(--sdds-dropdown-disabled);
   border: none;
 }
 :host::part(dropdown-filter-disabled)::placeholder {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-dropdown-disabled);
 }
 .sdds-dropdown {

package/dist/collection/components/dropdown/dropdown.js CHANGED Viewed

@@ -1,17 +1,17 @@
 import { h, Host, } from '@stencil/core';
 export class Dropdown {
   constructor() {
-    this.modeVariant = undefined;
+    this.modeVariant = null;
     this.placeholder = undefined;
     this.defaultOption = undefined;
     this.selectedOption = undefined;
-    this.disabled = undefined;
+    this.disabled = false;
     this.type = 'default';
     this.size = 'lg';
     this.inline = false;
     this.labelPosition = 'no-label';
     this.label = undefined;
-    this.state = 'default';
+    this.state = false;
     this.helper = '';
     this.openDirection = 'auto';
     this.optionValues = [];
@@ -28,11 +28,13 @@ export class Dropdown {
     this.dropdownMenuSelector = undefined;
     this.listItemIndex = -1;
     this.listItemArray = undefined;
+    this.listItemObject = undefined;
   }
   componentWillLoad() {
     // If default option is set, update the default selectedLabel value
     // this.host.children is a HTMLCollection type, cannot use forEach
-    this.listItemArray = Array.from(this.host.children);
+    this.listItemObject = this.host.children;
+    this.listItemArray = Array.from(this.listItemObject);
     this.listItemArray.map((listItem) => {
       this.optionValues.push(listItem.value);
       this.optionLabels.push(listItem.innerText.trim());
@@ -108,7 +110,7 @@ export class Dropdown {
             else {
               this.listItemIndex = 0;
             }
-            this.listItemArray[this.listItemIndex].focus();
+            this.listItemObject[this.listItemIndex].focus();
           }
           break;
         case 'ArrowUp':
@@ -120,7 +122,7 @@ export class Dropdown {
             else {
               this.listItemIndex = this.listItemArray.length - 1;
             }
-            this.listItemArray[this.listItemIndex].focus();
+            this.listItemObject[this.listItemIndex].focus();
           }
           break;
         case 'Tab':
@@ -208,7 +210,7 @@ export class Dropdown {
         ${this.selectedLabel.length > 0 || this.selectedLabel === ''
         ? 'sdds-dropdown--selected'
         : ''}
-        ${this.state === 'error' ? 'sdds-dropdown--error' : ''}
+        ${this.state ? 'sdds-dropdown--error' : ''}
         ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
         ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
         ? 'sdds-dropdown--label-inside-position'
@@ -272,10 +274,11 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the the dropdown."
+          "text": "Set the variant of the dropdown."
         },
         "attribute": "mode-variant",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "null"
       },
       "placeholder": {
         "type": "string",
@@ -343,7 +346,8 @@ export class Dropdown {
           "text": "Set to true for disabled states"
         },
         "attribute": "disabled",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "type": {
         "type": "string",
@@ -435,11 +439,11 @@ export class Dropdown {
         "reflect": false
       },
       "state": {
-        "type": "string",
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -450,7 +454,7 @@ export class Dropdown {
         },
         "attribute": "state",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "false"
       },
       "helper": {
         "type": "string",
@@ -482,7 +486,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Direction that the dropdown will open. By default set to auto."
+          "text": "Direction that the dropdown will open. Default is auto."
         },
         "attribute": "open-direction",
         "reflect": false,
@@ -505,7 +509,8 @@ export class Dropdown {
       "dropdownMenuHeight": {},
       "dropdownMenuSelector": {},
       "listItemIndex": {},
-      "listItemArray": {}
+      "listItemArray": {},
+      "listItemObject": {}
     };
   }
   static get events() {
@@ -567,7 +572,7 @@ export class Dropdown {
         "capture": false,
         "passive": false
       }, {
-        "name": "selectOption",
+        "name": "internalSddsSelect",
         "method": "selectOptionHandler",
         "target": undefined,
         "capture": false,

package/dist/collection/components/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n Listen,\n Host,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown {\n textInput?: HTMLInputElement;\n\n /** Set the variant of the the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary';\n\n /* Placeholder text for dropdown with no selectedLabel item /\n @Prop() placeholder: string;\n\n /* Add the value of the option as string to set it as default /\n @Prop() defaultOption: string;\n\n /* Add the value of the option as string to set it as new selected value /\n @Prop() selectedOption: string;\n\n /* Set to true for disabled states /\n @Prop() disabled: boolean;\n\n /* `Controls type of dropdown. /\n @Prop() type: 'default' \| 'multiselect' \| 'filter' = 'default';\n\n /* Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated /\n @Prop() size: 'sm' \| 'md' \| 'lg' \| 'small' \| 'medium' \| 'large' = 'lg';\n\n /* Set to true to make the width following the label text length /\n @Prop() inline: boolean = false;\n\n /* Controls position of label /\n @Prop() labelPosition: 'no-label' \| 'inside' \| 'outside' = 'no-label';\n\n /* Label text for label inside & outside /\n @Prop() label: string;\n\n /* Support `error` state /\n @Prop() state: string = 'default';\n\n /* Add helper text in the bottom of dropdown /\n @Prop() helper: string = '';\n\n /* Direction that the dropdown will open. By default set to auto. */\n @Prop() openDirection: 'down' \| 'up' \| 'auto' = 'auto';\n\n @State() optionValues: Array<any> = [];\n\n @State() optionLabels: Array<any> = [];\n\n @State() open: boolean = false;\n\n @State() node: HTMLElement;\n\n @State() selectedLabel: string = '';\n\n @State() selectedValue: string = '';\n\n @State() selectedValuesArray: Array<any> = [];\n\n @State() selectedLabelsArray: Array<any> = [];\n\n @State() dropdownUniqueClass: string = '';\n\n @State() openUpwards: boolean = false;\n\n @State() dropdownMenuHeight: number = 0;\n\n @State() dropdownMenuSelector: HTMLElement;\n\n @State() listItemIndex: any = -1;\n\n @State() listItemArray: any;\n\n @Element() host: HTMLElement;\n\n componentWillLoad() {\n // If default option is set, update the default selectedLabel value\n // this.host.children is a HTMLCollection type, cannot use forEach\n this.listItemArray = Array.from(this.host.children);\n this.listItemArray.map((listItem) => {\n this.optionValues.push(listItem.value);\n this.optionLabels.push(listItem.innerText.trim());\n });\n this.setOptionFromOutside(this.defaultOption);\n\n if (this.size === 'small') {\n this.size = 'sm';\n console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n }\n if (this.size === 'medium') {\n this.size = 'md';\n console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n }\n if (this.size === 'large') {\n this.size = 'lg';\n console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n }\n }\n\n setOptionFromOutside(optionValue) {\n if (optionValue) {\n this.deselectAll();\n // TODO\n // eslint-disable-next-line no-param-reassign\n optionValue = optionValue.split(',');\n for (let i = 0; i < this.host.children.length; i++) {\n // Todo - specify type\n const el: any = this.host.children[i];\n if (optionValue.includes(el.value.trim())) {\n this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n this.selectedLabel = el.textContent;\n this.selectedValue = el.value;\n el.setAttribute('selectedLabel', 'true');\n el.setAttribute('selected', 'true');\n } else {\n el.setAttribute('selectedLabel', 'false');\n el.setAttribute('selected', 'false');\n }\n }\n }\n }\n\n @Watch('selectedOption')\n changeSelectedOption() {\n if (this.selectedValuesArray.includes(this.selectedOption)) {\n this.resetOption();\n }\n this.setOptionFromOutside(this.selectedOption);\n this.host.setAttribute('selected-option', '');\n }\n\n @Listen('click', { target: 'document' })\n handleDocClick(ev) {\n // To stop bubble click\n ev.stopPropagation();\n const target = ev ? ev.composedPath()[0] : window.event.target[0];\n if (this.node !== undefined && this.node.contains(target)) {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n this.textInput.focus();\n }\n } else {\n this.tabbingLabelReset();\n this.open = false;\n }\n }\n\n @Listen('keydown')\n keyListener(ev: KeyboardEvent) {\n if (!this.disabled) {\n switch (ev.key) {\n case 'ArrowDown':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex < this.listItemArray.length - 1) {\n this.listItemIndex++;\n } else {\n this.listItemIndex = 0;\n }\n this.listItemArray[this.listItemIndex].focus();\n }\n break;\n case 'ArrowUp':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex > 0) {\n this.listItemIndex--;\n } else {\n this.listItemIndex = this.listItemArray.length - 1;\n }\n this.listItemArray[this.listItemIndex].focus();\n }\n break;\n\n case 'Tab':\n this.open = false;\n break;\n\n case 'Escape':\n this.open = false;\n this.node.focus();\n break;\n\n default:\n break;\n }\n }\n }\n\n handleClick() {\n this.open = this.open === false;\n if (this.openDirection === 'auto') {\n this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n const distanceToBottom = this.host.getBoundingClientRect().top;\n const viewportHeight = window.innerHeight;\n this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n // Additional 57px is added as compensation for dropdown element own input/button height\n // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n } else {\n this.openUpwards = this.openDirection === 'up';\n }\n }\n\n tabbingLabelReset() {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n this.textInput.value = '';\n this.inputSearch.emit('');\n }\n if (this.selectedLabel !== this.textInput.value) {\n this.textInput.value = this.selectedLabel;\n }\n }\n }\n\n @Listen('selectOption')\n selectOptionHandler(event: CustomEvent<any>) {\n this.open = this.type === 'multiselect';\n if (this.type !== 'multiselect') {\n this.selectedLabel = event.detail.label;\n this.selectedValue = event.detail.value;\n this.tabbingLabelReset();\n } else {\n if (this.selectedValuesArray.includes(event.detail.value)) {\n const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n this.selectedValuesArray = this.selectedValuesArray.filter(\n (_value, index) => index !== itemIndex,\n );\n this.selectedLabelsArray = this.selectedLabelsArray.filter(\n (_value, index) => index !== itemIndex,\n );\n } else {\n this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n }\n }\n }\n\n @Event({\n eventName: 'inputSearch',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n inputSearch: EventEmitter<any>;\n\n handleSearch(ev) {\n const searchTerm = ev.target.value;\n this.inputSearch.emit(searchTerm);\n this.open = true;\n }\n\n deselectAll() {\n this.selectedLabel = '';\n this.selectedValue = '';\n this.selectedLabelsArray = [];\n this.selectedValuesArray = [];\n this.listItemArray = this.listItemArray.map((optionItem) => ({\n ...optionItem,\n selected: false,\n }));\n }\n\n @Method() async resetOption() {\n this.deselectAll();\n this.open = false;\n\n if (this.defaultOption) {\n this.setOptionFromOutside(this.defaultOption);\n }\n }\n\n render() {\n return (\n <Host\n class={`\n ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n ${this.inline ? 'sdds-dropdown-inline' : ''}\n ${\n this.selectedLabel.length > 0 \|\| this.selectedLabel === ''\n ? 'sdds-dropdown--selected'\n : ''\n }\n ${this.state === 'error' ? 'sdds-dropdown--error' : ''}\n ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n ${\n this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown--label-inside-position'\n : ''\n }\n `}\n selected-value={this.selectedValue}\n selected-text={this.selectedLabel}\n multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n >\n <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n {this.labelPosition === 'outside' && this.label.length > 0 ? (\n <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n ) : (\n ''\n )}\n <button\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex={this.disabled ? '-1' : null}\n class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n this.selectedValue !== '' \|\| this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown-toggle--selected'\n : ''\n }\n ${\n this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n ? `sdds-dropdown-toggle-label-inside-${this.size}`\n : `sdds-dropdown-toggle-${this.size}`\n }`}\n type=\"button\"\n onClick={() => this.handleClick()}\n ref={(node) => (this.node = node)}\n >\n <span class=\"sdds-dropdown-label\">\n {this.type === 'filter' ? (\n <input\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex=\"-1\"\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class=\"sdds-dropdown-filter\"\n type=\"text\"\n placeholder={this.placeholder}\n value={this.selectedLabel}\n onInput={(event) => this.handleSearch(event)}\n autoComplete=\"off\"\n />\n ) : (\n <span\n class={{\n 'sdds-dropdown-label-container': true,\n 'sdds-dropdown-label-container--label-inside':\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0),\n }}\n >\n {this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0) &&\n this.labelPosition === 'inside' &&\n this.label.length > 0 && (\n <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n )}\n <span\n class={`sdds-dropdown-label-main ${\n (this.selectedLabel.length === 0 \|\|\n (this.labelPosition === 'inside' && this.label.length < 0)) &&\n 'sdds-dropdown-placeholder'\n }`}\n >\n {this.selectedLabel.length > 0 &&\n this.type !== 'multiselect' &&\n this.selectedLabel}\n\n {this.type === 'multiselect' && (\n <span class=\"sdds-dropdown-multiselect-result\">\n {this.labelPosition !== 'inside' &&\n this.selectedLabelsArray.toString().length < 1 &&\n this.placeholder}\n {this.selectedLabelsArray.toString().length > 0 &&\n this.selectedLabelsArray.toString().split(',').join(', ')}\n </span>\n )}\n {!this.selectedLabel &&\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n this.label}\n\n {!this.selectedLabel &&\n this.type !== 'multiselect' &&\n this.labelPosition !== 'inside' &&\n this.placeholder}\n\n {!this.selectedLabel &&\n this.size === 'sm' &&\n this.labelPosition === 'inside' &&\n this.placeholder}\n </span>\n </span>\n )}\n </span>\n <svg\n class=\"sdds-dropdown-arrow\"\n width=\"12\"\n height=\"7\"\n viewBox=\"0 0 12 7\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 1L6 6L11 1\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <span\n class=\"sdds-dropdown-menu\"\n // Need to have reference in order to calc height and distance from bottom\n ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n >\n <slot />\n </span>\n </span>\n <p class=\"sdds-dropdown-helper\">\n <svg\n class=\"sdds-dropdown-error-icon\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span>{this.helper}</span>\n </p>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAI,EACJ,KAAK,EAEL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,QAAQ;;uBAI4B,IAAI;;;;oBAYvB,KAAK;gBAGoB,SAAS;gBAGI,IAAI;kBAG5C,KAAK;yBAG4B,UAAU;;iBAM5C,KAAK;kBAGL,EAAE;yBAGqB,MAAM;wBAElB,EAAE;wBAEF,EAAE;gBAEb,KAAK;;yBAIG,EAAE;yBAEF,EAAE;+BAEQ,EAAE;+BAEF,EAAE;+BAEN,EAAE;uBAET,KAAK;8BAEC,CAAC;;yBAIT,CAAC,CAAC;;;;EAQhC,iBAAiB;IACf,mEAAmE;IACnE,kEAAkE;IAClE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACzC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACrD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;MACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAE9C,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;MACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAC;KACnE;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;KACpE;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;MACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAC;KACnE;EACH,CAAC;EAED,oBAAoB,CAAC,WAAW;IAC9B,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,OAAO;MACP,6CAA6C;MAC7C,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;MACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,sBAAsB;QACtB,MAAM,EAAE,GAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACtC,IAAI,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE;UACzC,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;UAChF,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;UACnE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,WAAW,CAAC;UACpC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,KAAK,CAAC;UAC9B,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;UACzC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;SACrC;aAAM;UACL,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;UAC1C,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;SACtC;OACF;KACF;EACH,CAAC;EAGD,oBAAoB;IAClB,IAAI,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;MAC1D,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IACD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,cAAc,CAAC,EAAE;IACf,uBAAuB;IACvB,EAAE,CAAC,eAAe,EAAE,CAAC;IACrB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;MACzD,IAAI,OAAO,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;QACpE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;OACxB;KACF;SAAM;MACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;MACzB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAGD,WAAW,CAAC,EAAiB;IAC3B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,QAAQ,EAAE,CAAC,GAAG,EAAE;QACd,KAAK,WAAW;UACd,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;cACtD,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;iBAAM;cACL,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;aACxB;YACA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAiB,CAAC,KAAK,EAAE,CAAC;WAClE;UACD,MAAM;QACR,KAAK,SAAS;UACZ,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;cAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;iBAAM;cACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;aACpD;YACA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAiB,CAAC,KAAK,EAAE,CAAC;WAClE;UACD,MAAM;QAER,KAAK,KAAK;UACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;UAClB,MAAM;QAER,KAAK,QAAQ;UACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;UAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;UAClB,MAAM;QAER;UACE,MAAM;OACT;KACF;EACH,CAAC;EAED,WAAW;IACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;IAChC,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;MACjC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;MACjE,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;MAC/D,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;MAC1C,IAAI,CAAC,WAAW,GAAG,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,GAAG,EAAE,GAAG,cAAc,CAAC;MACpF,oHAAoH;MACpH,wFAAwF;MACxF,0GAA0G;KAC3G;SAAM;MACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC;KAChD;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,OAAO,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;MACpE,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;QACzD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;OAC3B;MACD,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;QAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;OAC3C;KACF;EACH,CAAC;EAGD,mBAAmB,CAAC,KAAuB;IACzC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC;IACxC,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MACxC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MACxC,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;SAAM;MACL,IAAI,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACzD,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CACxD,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CACvC,CAAC;QACF,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CACxD,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CACvC,CAAC;OACH;WAAM;QACL,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7E,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;OACrF;KACF;EACH,CAAC;EAUD,YAAY,CAAC,EAAE;IACb,MAAM,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAED,WAAW;IACT,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;IACxB,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;IAC9B,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;IAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,iCACvD,UAAU,KACb,QAAQ,EAAE,KAAK,IACf,CAAC,CAAC;EACN,CAAC;EAES,KAAK,CAAC,WAAW;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAElB,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC/C;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;UACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE;UAC/D,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;UACxD,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;UAC9D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;UAEzC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,EAAE;QACxD,CAAC,CAAC,yBAAyB;QAC3B,CAAC,CAAC,EACN;UACE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;UACxC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE;UAErD,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC;QACpE,CAAC,CAAC,sCAAsC;QACxC,CAAC,CAAC,EACN;QACA,oBACgB,IAAI,CAAC,aAAa,mBACnB,IAAI,CAAC,aAAa,2BACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,2BACxC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC;MAE/D,YAAM,KAAK,EAAE,+BAA+B,IAAI,CAAC,IAAI,EAAE;QACpD,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3D,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CAAC,CAAC,CAAC,CACF,EAAE,CACH;QACD,cACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACrC,KAAK,EAAE,wBAAwB,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAC/E,IAAI,CAAC,aAAa,KAAK,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC;YAC9D,CAAC,CAAC,gCAAgC;YAClC,CAAC,CAAC,EACN;kBAEM,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAChF,CAAC,CAAC,qCAAqC,IAAI,CAAC,IAAI,EAAE;YAClD,CAAC,CAAC,wBAAwB,IAAI,CAAC,IAAI,EACvC,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;UAEjC,YAAM,KAAK,EAAC,qBAAqB,IAC9B,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxB,aACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,OAA2B,CAAC,EAChE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,YAAY,EAAC,KAAK,GAClB,CACH,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAE;cACL,+BAA+B,EAAE,IAAI;cACrC,6CAA6C,EAC3C,IAAI,CAAC,aAAa,KAAK,QAAQ;gBAC/B,IAAI,CAAC,IAAI,KAAK,IAAI;gBAClB,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;aACzE;YAEA,IAAI,CAAC,IAAI,KAAK,IAAI;cACjB,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;cACtE,IAAI,CAAC,aAAa,KAAK,QAAQ;cAC/B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACvB,YAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D;YACH,YACE,KAAK,EAAE,4BACL,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;gBAC9B,CAAC,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC7D,2BACF,EAAE;cAED,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;gBAC5B,IAAI,CAAC,IAAI,KAAK,aAAa;gBAC3B,IAAI,CAAC,aAAa;cAEnB,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,CAC9B,YAAM,KAAK,EAAC,kCAAkC;gBAC3C,IAAI,CAAC,aAAa,KAAK,QAAQ;kBAC9B,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC;kBAC9C,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC;kBAC7C,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CACtD,CACR;cACA,CAAC,IAAI,CAAC,aAAa;gBAClB,IAAI,CAAC,aAAa,KAAK,QAAQ;gBAC/B,IAAI,CAAC,IAAI,KAAK,IAAI;gBAClB,IAAI,CAAC,KAAK;cAEX,CAAC,IAAI,CAAC,aAAa;gBAClB,IAAI,CAAC,IAAI,KAAK,aAAa;gBAC3B,IAAI,CAAC,aAAa,KAAK,QAAQ;gBAC/B,IAAI,CAAC,WAAW;cAEjB,CAAC,IAAI,CAAC,aAAa;gBAClB,IAAI,CAAC,IAAI,KAAK,IAAI;gBAClB,IAAI,CAAC,aAAa,KAAK,QAAQ;gBAC/B,IAAI,CAAC,WAAW,CACb,CACF,CACR,CACI;UACP,WACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;YAElC,YACE,CAAC,EAAC,eAAe,EACjB,MAAM,EAAC,cAAc,kBACR,MAAM,oBACJ,OAAO,qBACN,OAAO,GACvB,CACE,CACC;QACT,YACE,KAAK,EAAC,oBAAoB;UAC1B,0EAA0E;UAC1E,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,YAAY,CAAC;UAEjE,eAAQ,CACH,CACF;MACP,SAAG,KAAK,EAAC,sBAAsB;QAC7B,WACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW;UAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0MAA0M,EAC5M,IAAI,EAAC,cAAc,GACnB;UACF,YACE,CAAC,EAAC,gGAAgG,EAClG,IAAI,EAAC,cAAc,GACnB,CACE;QACN,gBAAO,IAAI,CAAC,MAAM,CAAQ,CACxB,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n Listen,\n Host,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown {\n textInput?: HTMLInputElement;\n\n /** Set the variant of the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placeholder text for dropdown with no selectedLabel item /\n @Prop() placeholder: string;\n\n /* Add the value of the option as string to set it as default /\n @Prop() defaultOption: string;\n\n /* Add the value of the option as string to set it as new selected value /\n @Prop() selectedOption: string;\n\n /* Set to true for disabled states /\n @Prop() disabled: boolean = false;\n\n /* `Controls type of dropdown. /\n @Prop() type: 'default' \| 'multiselect' \| 'filter' = 'default';\n\n /* Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated /\n @Prop() size: 'sm' \| 'md' \| 'lg' \| 'small' \| 'medium' \| 'large' = 'lg';\n\n /* Set to true to make the width following the label text length /\n @Prop() inline: boolean = false;\n\n /* Controls position of label /\n @Prop() labelPosition: 'no-label' \| 'inside' \| 'outside' = 'no-label';\n\n /* Label text for label inside & outside /\n @Prop() label: string;\n\n /* Support `error` state /\n @Prop() state: boolean = false;\n\n /* Add helper text in the bottom of dropdown /\n @Prop() helper: string = '';\n\n /* Direction that the dropdown will open. Default is auto. */\n @Prop() openDirection: 'down' \| 'up' \| 'auto' = 'auto';\n\n @State() optionValues: Array<any> = [];\n\n @State() optionLabels: Array<any> = [];\n\n @State() open: boolean = false;\n\n @State() node: HTMLElement;\n\n @State() selectedLabel: string = '';\n\n @State() selectedValue: string = '';\n\n @State() selectedValuesArray: Array<any> = [];\n\n @State() selectedLabelsArray: Array<any> = [];\n\n @State() dropdownUniqueClass: string = '';\n\n @State() openUpwards: boolean = false;\n\n @State() dropdownMenuHeight: number = 0;\n\n @State() dropdownMenuSelector: HTMLElement;\n\n @State() listItemIndex: any = -1;\n\n @State() listItemArray: any;\n\n @State() listItemObject: any;\n\n @Element() host: HTMLElement;\n\n componentWillLoad() {\n // If default option is set, update the default selectedLabel value\n // this.host.children is a HTMLCollection type, cannot use forEach\n this.listItemObject = this.host.children;\n this.listItemArray = Array.from(this.listItemObject);\n this.listItemArray.map((listItem) => {\n this.optionValues.push(listItem.value);\n this.optionLabels.push(listItem.innerText.trim());\n });\n this.setOptionFromOutside(this.defaultOption);\n\n if (this.size === 'small') {\n this.size = 'sm';\n console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n }\n if (this.size === 'medium') {\n this.size = 'md';\n console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n }\n if (this.size === 'large') {\n this.size = 'lg';\n console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n }\n }\n\n setOptionFromOutside(optionValue) {\n if (optionValue) {\n this.deselectAll();\n // TODO\n // eslint-disable-next-line no-param-reassign\n optionValue = optionValue.split(',');\n for (let i = 0; i < this.host.children.length; i++) {\n // Todo - specify type\n const el: any = this.host.children[i];\n if (optionValue.includes(el.value.trim())) {\n this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n this.selectedLabel = el.textContent;\n this.selectedValue = el.value;\n el.setAttribute('selectedLabel', 'true');\n el.setAttribute('selected', 'true');\n } else {\n el.setAttribute('selectedLabel', 'false');\n el.setAttribute('selected', 'false');\n }\n }\n }\n }\n\n @Watch('selectedOption')\n changeSelectedOption() {\n if (this.selectedValuesArray.includes(this.selectedOption)) {\n this.resetOption();\n }\n this.setOptionFromOutside(this.selectedOption);\n this.host.setAttribute('selected-option', '');\n }\n\n @Listen('click', { target: 'document' })\n handleDocClick(ev) {\n // To stop bubble click\n ev.stopPropagation();\n const target = ev ? ev.composedPath()[0] : window.event.target[0];\n if (this.node !== undefined && this.node.contains(target)) {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n this.textInput.focus();\n }\n } else {\n this.tabbingLabelReset();\n this.open = false;\n }\n }\n\n @Listen('keydown')\n keyListener(ev: KeyboardEvent) {\n if (!this.disabled) {\n switch (ev.key) {\n case 'ArrowDown':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex < this.listItemArray.length - 1) {\n this.listItemIndex++;\n } else {\n this.listItemIndex = 0;\n }\n (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n }\n break;\n case 'ArrowUp':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex > 0) {\n this.listItemIndex--;\n } else {\n this.listItemIndex = this.listItemArray.length - 1;\n }\n (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n }\n break;\n\n case 'Tab':\n this.open = false;\n break;\n\n case 'Escape':\n this.open = false;\n this.node.focus();\n break;\n\n default:\n break;\n }\n }\n }\n\n handleClick() {\n this.open = this.open === false;\n if (this.openDirection === 'auto') {\n this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n const distanceToBottom = this.host.getBoundingClientRect().top;\n const viewportHeight = window.innerHeight;\n this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n // Additional 57px is added as compensation for dropdown element own input/button height\n // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n } else {\n this.openUpwards = this.openDirection === 'up';\n }\n }\n\n tabbingLabelReset() {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n this.textInput.value = '';\n this.inputSearch.emit('');\n }\n if (this.selectedLabel !== this.textInput.value) {\n this.textInput.value = this.selectedLabel;\n }\n }\n }\n\n @Listen('internalSddsSelect')\n selectOptionHandler(event: CustomEvent<any>) {\n this.open = this.type === 'multiselect';\n if (this.type !== 'multiselect') {\n this.selectedLabel = event.detail.label;\n this.selectedValue = event.detail.value;\n this.tabbingLabelReset();\n } else {\n if (this.selectedValuesArray.includes(event.detail.value)) {\n const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n this.selectedValuesArray = this.selectedValuesArray.filter(\n (_value, index) => index !== itemIndex,\n );\n this.selectedLabelsArray = this.selectedLabelsArray.filter(\n (_value, index) => index !== itemIndex,\n );\n } else {\n this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n }\n }\n }\n\n @Event({\n eventName: 'inputSearch',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n inputSearch: EventEmitter<any>;\n\n handleSearch(ev) {\n const searchTerm = ev.target.value;\n this.inputSearch.emit(searchTerm);\n this.open = true;\n }\n\n deselectAll() {\n this.selectedLabel = '';\n this.selectedValue = '';\n this.selectedLabelsArray = [];\n this.selectedValuesArray = [];\n this.listItemArray = this.listItemArray.map((optionItem) => ({\n ...optionItem,\n selected: false,\n }));\n }\n\n @Method() async resetOption() {\n this.deselectAll();\n this.open = false;\n\n if (this.defaultOption) {\n this.setOptionFromOutside(this.defaultOption);\n }\n }\n\n render() {\n return (\n <Host\n class={`\n ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n ${this.inline ? 'sdds-dropdown-inline' : ''}\n ${\n this.selectedLabel.length > 0 \|\| this.selectedLabel === ''\n ? 'sdds-dropdown--selected'\n : ''\n }\n ${this.state ? 'sdds-dropdown--error' : ''}\n ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n ${\n this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown--label-inside-position'\n : ''\n }\n `}\n selected-value={this.selectedValue}\n selected-text={this.selectedLabel}\n multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n >\n <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n {this.labelPosition === 'outside' && this.label.length > 0 ? (\n <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n ) : (\n ''\n )}\n <button\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex={this.disabled ? '-1' : null}\n class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n this.selectedValue !== '' \|\| this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown-toggle--selected'\n : ''\n }\n ${\n this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n ? `sdds-dropdown-toggle-label-inside-${this.size}`\n : `sdds-dropdown-toggle-${this.size}`\n }`}\n type=\"button\"\n onClick={() => this.handleClick()}\n ref={(node) => (this.node = node)}\n >\n <span class=\"sdds-dropdown-label\">\n {this.type === 'filter' ? (\n <input\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex=\"-1\"\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class=\"sdds-dropdown-filter\"\n type=\"text\"\n placeholder={this.placeholder}\n value={this.selectedLabel}\n onInput={(event) => this.handleSearch(event)}\n autoComplete=\"off\"\n />\n ) : (\n <span\n class={{\n 'sdds-dropdown-label-container': true,\n 'sdds-dropdown-label-container--label-inside':\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0),\n }}\n >\n {this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0) &&\n this.labelPosition === 'inside' &&\n this.label.length > 0 && (\n <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n )}\n <span\n class={`sdds-dropdown-label-main ${\n (this.selectedLabel.length === 0 \|\|\n (this.labelPosition === 'inside' && this.label.length < 0)) &&\n 'sdds-dropdown-placeholder'\n }`}\n >\n {this.selectedLabel.length > 0 &&\n this.type !== 'multiselect' &&\n this.selectedLabel}\n\n {this.type === 'multiselect' && (\n <span class=\"sdds-dropdown-multiselect-result\">\n {this.labelPosition !== 'inside' &&\n this.selectedLabelsArray.toString().length < 1 &&\n this.placeholder}\n {this.selectedLabelsArray.toString().length > 0 &&\n this.selectedLabelsArray.toString().split(',').join(', ')}\n </span>\n )}\n {!this.selectedLabel &&\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n this.label}\n\n {!this.selectedLabel &&\n this.type !== 'multiselect' &&\n this.labelPosition !== 'inside' &&\n this.placeholder}\n\n {!this.selectedLabel &&\n this.size === 'sm' &&\n this.labelPosition === 'inside' &&\n this.placeholder}\n </span>\n </span>\n )}\n </span>\n <svg\n class=\"sdds-dropdown-arrow\"\n width=\"12\"\n height=\"7\"\n viewBox=\"0 0 12 7\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 1L6 6L11 1\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <span\n class=\"sdds-dropdown-menu\"\n // Need to have reference in order to calc height and distance from bottom\n ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n >\n <slot />\n </span>\n </span>\n <p class=\"sdds-dropdown-helper\">\n <svg\n class=\"sdds-dropdown-error-icon\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span>{this.helper}</span>\n </p>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/footer/footer.stories.js CHANGED Viewed

@@ -21,24 +21,24 @@ export default {
   argTypes: {
     modeVariant: {
       name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
       options: ['Inherit from parent', 'Primary', 'Secondary'],
-      description: 'Footer mode variant',
       table: {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
     topPart: {
       name: 'Top part',
-      description: 'Adds top part of the footer with more links',
-      table: {
-        defaultValue: { summary: false },
-      },
+      description: 'Adds the top part of the footer with more links.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
   },
   args: {

package/dist/collection/components/footer/footer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,~~WAAW,EAAE,qBAAqB;MAClC,~~KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,~~6CAA6C~~;~~MAC1D~~,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;~~MACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;~~KACF;GACF;EACD,IAAI,EAAC;IACH,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACjB;CACA,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAC,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;IAWA,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAA,CAAC,CAAC,EAAE;;MAG1F,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCH;EACC,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;GAkBD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: readme,\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n ~~description: 'Footer mode variant',\n~~ table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds top part of the footer with more links',\n ~~table~~: {\n ~~defaultValue~~: ~~{ summary: false }~~,\n },\n ~~control~~: {\n ~~type~~: ~~'boolean'~~,\n },\n },\n },\n args:{\n modeVariant: 'Inherit from parent', \n topPart: false,\n}\n};\n\nconst Template = ({ topPart, modeVariant}) =>\n formatHtmlPreview(\n `\n <style>\n .demo-wrapper {\n padding: 0;\n margin: 0;\n font-size: 14px;\n }\n </style>\n\n <div class=\"demo-wrapper\">\n <div class=\"sdds-footer \n ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}`: ''}\n \">\n ${\n topPart\n ? `\n <div class=\"sdds-footer-top sdds-container-fluid\">\n <div class=\"sdds-row\">\n <div class=\"sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title opened\">\n <span>Title 1</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links opened\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n\n <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title\">\n <span>Title 2</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n </div>\n </div>\n `\n : ''\n }\n <div class=\"sdds-footer-main\">\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n <ul class=\"sdds-footer-social-links\">\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n </ul>\n <div class=\"sdds-footer-main-brand\">\n <p>Copyright © 2022 Scania</p>\n </div>\n </div>\n </div>\n </div>\n `,\n );\n\nexport const Native = Template.bind({});\n"]}
1	+ {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAC;IACH,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACjB;CACA,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAC,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;IAWA,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAA,CAAC,CAAC,EAAE;;MAG1F,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCH;EACC,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;GAkBD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: readme,\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds the top part of the footer with more links.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n },\n args:{\n modeVariant: 'Inherit from parent', \n topPart: false,\n}\n};\n\nconst Template = ({ topPart, modeVariant}) =>\n formatHtmlPreview(\n `\n <style>\n .demo-wrapper {\n padding: 0;\n margin: 0;\n font-size: 14px;\n }\n </style>\n\n <div class=\"demo-wrapper\">\n <div class=\"sdds-footer \n ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}`: ''}\n \">\n ${\n topPart\n ? `\n <div class=\"sdds-footer-top sdds-container-fluid\">\n <div class=\"sdds-row\">\n <div class=\"sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title opened\">\n <span>Title 1</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links opened\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n\n <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title\">\n <span>Title 2</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n </div>\n </div>\n `\n : ''\n }\n <div class=\"sdds-footer-main\">\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n <ul class=\"sdds-footer-social-links\">\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n </ul>\n <div class=\"sdds-footer-main-brand\">\n <p>Copyright © 2022 Scania</p>\n </div>\n </div>\n </div>\n </div>\n `,\n );\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js CHANGED Viewed

@@ -23,18 +23,18 @@ export default {
   argTypes: {
     modeVariant: {
       name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
       options: ['Inherit from parent', 'Primary', 'Secondary'],
-      description: 'Footer mode variant',
       table: {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
     topPart: {
       name: 'Top part',
-      description: 'Adds the top part of the footer',
+      description: 'Adds the top part of the footer with more links.',
       control: {
         type: 'boolean',
       },
@@ -42,7 +42,7 @@ export default {
   },
   args: {
     modeVariant: 'Inherit from parent',
-    topPart: true,
+    topPart: false,
   },
 };
 const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdds-footer.stories.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAEjE,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE;IAC5F,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,~~WAAW,EAAE,qBAAqB;MAClC,~~KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,~~iCAAiC~~;~~MAC9C~~,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,~~IAAI~~;~~GACd~~;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CACf;;;;;;;;;MASE,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;QAGxF,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;;;GAuBH,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeLink from './sdds-footer-link/readme.md';\nimport readmeLinkGroup from './sdds-footer-link-group/readme.md';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer link': readmeLink },\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n ~~description: 'Footer mode variant',\n~~ table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds the top part of the footer',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n topPart: ~~true~~,\n },\n};\n\nconst Template = ({ topPart, modeVariant }) =>\n formatHtmlPreview(\n `\n <main>\n <div class=\"sdds-u-p3 \">\n <div class=\"sdds-body-01\">\n Resize the window to see how the footer behaves on smaller/bigger screens.\n </div>\n </div>\n </main>\n <sdds-footer\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n >\n ${\n topPart\n ? `\n <div slot=\"top\">\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n </div>\n `\n : ''\n }\n <div slot=\"main-left\">\n <sdds-footer-link-group>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n </div>\n <div slot=\"main-right\">\n <sdds-footer-link-group>\n <sdds-footer-link link-href=\"#\">\n <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-link>\n <sdds-footer-link link-href=\"#\">\n <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-link>\n <sdds-footer-link link-href=\"#\">\n <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-link>\n </sdds-footer-link-group>\n </div>\n </sdds-footer>\n \n `,\n );\n\nexport const WebComponent = Template.bind({});\n"]}
1	+ {"version":3,"file":"sdds-footer.stories.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAEjE,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE;IAC5F,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CACf;;;;;;;;;MASE,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;QAGxF,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;;;GAuBH,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeLink from './sdds-footer-link/readme.md';\nimport readmeLinkGroup from './sdds-footer-link-group/readme.md';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer link': readmeLink },\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds the top part of the footer with more links.',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n topPart: false,\n },\n};\n\nconst Template = ({ topPart, modeVariant }) =>\n formatHtmlPreview(\n `\n <main>\n <div class=\"sdds-u-p3 \">\n <div class=\"sdds-body-01\">\n Resize the window to see how the footer behaves on smaller/bigger screens.\n </div>\n </div>\n </main>\n <sdds-footer\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n >\n ${\n topPart\n ? `\n <div slot=\"top\">\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n\n <sdds-footer-link-group title-text=\"Title\">\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n </div>\n `\n : ''\n }\n <div slot=\"main-left\">\n <sdds-footer-link-group>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n <sdds-footer-link link-href=\"#\">Link text</sdds-footer-link>\n </sdds-footer-link-group>\n </div>\n <div slot=\"main-right\">\n <sdds-footer-link-group>\n <sdds-footer-link link-href=\"#\">\n <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-link>\n <sdds-footer-link link-href=\"#\">\n <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-link>\n <sdds-footer-link link-href=\"#\">\n <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-link>\n </sdds-footer-link-group>\n </div>\n </sdds-footer>\n \n `,\n );\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/header/header-all.stories.js CHANGED Viewed

@@ -26,8 +26,10 @@ export default {
   argTypes: {
     siteName: {
       name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
+      description: 'Sets a custom title for the header.',
+      control: {
+        type: 'text',
+      },
     },
   },
   args: {