npm - @scania/tegel - Versions diffs - 0.0.51 → 0.0.61 - Mend

@scania/tegel 0.0.51 → 0.0.61

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 (1298) hide show

package/dist/collection/components/card/sdds-card.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { h, Host } from '@stencil/core';
-export class SddsCard {
-  constructor() {
-    this.handleClick = () => {
-      this.sddsClick.emit({
-        cardId: this.cardId,
-      });
-    };
+import { h, Host } from '@stencil/core';
+export class SddsCard {
+  constructor() {
+    this.handleClick = () => {
+      this.sddsClick.emit({
+        cardId: this.cardId,
+      });
+    };
     this.getCardContent = () => (h("div", null, this.headerPlacement === 'above' && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), ' ', h("div", { class: `
           card-top-header
           ${!this.headerImg ? 'no-header-img' : ''}
@@ -14,264 +14,264 @@ export class SddsCard {
             card-top-header
             ${!this.headerImg ? 'no-header-img' : ''}
             ${!this.header || !this.subheader ? 'single-line-header' : ''}
-            ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && h("div", { class: `sdds-divider` }), h("slot", { name: "card-body" })), h("div", { class: `card-bottom` }, this.hasCardBottomSlot && h("slot", { name: `card-bottom` }))));
-    this.modeVariant = null;
-    this.headerPlacement = 'above';
-    this.header = undefined;
-    this.subheader = undefined;
-    this.headerImg = undefined;
-    this.headerImgAlt = undefined;
-    this.bodyImg = undefined;
-    this.bodyImgAlt = undefined;
-    this.bodyDivider = false;
-    this.clickable = false;
-    this.cardId = crypto.randomUUID();
-    this.hasCardBottomSlot = false;
-    this.hasCardBodySlot = false;
-  }
-  connectedCallback() {
-    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
-    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
-  }
-  render() {
-    return (h(Host, { class: this.modeVariant && `sdds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
-        if (this.clickable) {
-          this.handleClick();
-        }
-      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
-  }
-  static get is() { return "sdds-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the card based on the theme used."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "headerPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'above' | 'below'",
-          "resolved": "\"above\" | \"below\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placement of the header"
-        },
-        "attribute": "header-placement",
-        "reflect": false,
-        "defaultValue": "'above'"
-      },
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text in the header"
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "subheader": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Subheader text in the header"
-        },
-        "attribute": "subheader",
-        "reflect": false
-      },
-      "headerImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header image src"
-        },
-        "attribute": "header-img",
-        "reflect": false
-      },
-      "headerImgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alt text for the header image"
-        },
-        "attribute": "header-img-alt",
-        "reflect": false
-      },
-      "bodyImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Body image src"
-        },
-        "attribute": "body-img",
-        "reflect": false
-      },
-      "bodyImgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alt text for the body image"
-        },
-        "attribute": "body-img-alt",
-        "reflect": false
-      },
-      "bodyDivider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Divider for the body"
-        },
-        "attribute": "body-divider",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "clickable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the card clickable."
-        },
-        "attribute": "clickable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "cardId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID for the card, must be unique.\n\n**NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time."
-        },
-        "attribute": "card-id",
-        "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasCardBottomSlot": {},
-      "hasCardBodySlot": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsClick",
-        "name": "sddsClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends unique card identifier when the card is clicked, if clickable=true"
-        },
-        "complexType": {
-          "original": "{\n    cardId: string;\n  }",
-          "resolved": "{ cardId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-}
-//# sourceMappingURL=sdds-card.js.map
+            ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && h("div", { class: `sdds-divider` }), h("slot", { name: "card-body" })), h("div", { class: `card-bottom` }, this.hasCardBottomSlot && h("slot", { name: `card-bottom` }))));
+    this.modeVariant = null;
+    this.headerPlacement = 'above';
+    this.header = undefined;
+    this.subheader = undefined;
+    this.headerImg = undefined;
+    this.headerImgAlt = undefined;
+    this.bodyImg = undefined;
+    this.bodyImgAlt = undefined;
+    this.bodyDivider = false;
+    this.clickable = false;
+    this.cardId = crypto.randomUUID();
+    this.hasCardBottomSlot = false;
+    this.hasCardBodySlot = false;
+  }
+  connectedCallback() {
+    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
+    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
+  }
+  render() {
+    return (h(Host, { class: this.modeVariant && `sdds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
+        if (this.clickable) {
+          this.handleClick();
+        }
+      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
+  }
+  static get is() { return "sdds-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the card based on the theme used."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "headerPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'above' | 'below'",
+          "resolved": "\"above\" | \"below\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placement of the header"
+        },
+        "attribute": "header-placement",
+        "reflect": false,
+        "defaultValue": "'above'"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text in the header"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text in the header"
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "headerImg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header image src"
+        },
+        "attribute": "header-img",
+        "reflect": false
+      },
+      "headerImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alt text for the header image"
+        },
+        "attribute": "header-img-alt",
+        "reflect": false
+      },
+      "bodyImg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Body image src"
+        },
+        "attribute": "body-img",
+        "reflect": false
+      },
+      "bodyImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alt text for the body image"
+        },
+        "attribute": "body-img-alt",
+        "reflect": false
+      },
+      "bodyDivider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Divider for the body"
+        },
+        "attribute": "body-divider",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the card clickable."
+        },
+        "attribute": "clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "cardId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the card, must be unique.\n\n**NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time."
+        },
+        "attribute": "card-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasCardBottomSlot": {},
+      "hasCardBodySlot": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClick",
+        "name": "sddsClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique card identifier when the card is clicked, if clickable=true"
+        },
+        "complexType": {
+          "original": "{\n    cardId: string;\n  }",
+          "resolved": "{ cardId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=sdds-card.js.map

package/dist/collection/components/card/sdds-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placement of the header /\n @Prop() headerPlacement: 'above' \| 'below' = 'above';\n\n /* Text in the header /\n @Prop() header: string;\n\n /* Subheader text in the header /\n @Prop() subheader: string;\n\n /* Header image src /\n @Prop() headerImg: string;\n\n /* Alt text for the header image /\n @Prop() headerImgAlt: string;\n\n /* Body image src /\n @Prop() bodyImg: string;\n\n /* Alt text for the body image /\n @Prop() bodyImgAlt: string;\n\n /* Divider for the body /\n @Prop() bodyDivider: boolean = false;\n\n /* Makes the card clickable. /\n @Prop() clickable: boolean = false;\n\n /* ID for the card, must be unique.\n \n NOTE: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n /\n @Prop() cardId: string = crypto.randomUUID();\n\n /* Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg \|\| this.header \|\| this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placement of the header /\n @Prop() headerPlacement: 'above' \| 'below' = 'above';\n\n /* Text in the header /\n @Prop() header: string;\n\n /* Subheader text in the header /\n @Prop() subheader: string;\n\n /* Header image src /\n @Prop() headerImg: string;\n\n /* Alt text for the header image /\n @Prop() headerImgAlt: string;\n\n /* Body image src /\n @Prop() bodyImg: string;\n\n /* Alt text for the body image /\n @Prop() bodyImgAlt: string;\n\n /* Divider for the body /\n @Prop() bodyDivider: boolean = false;\n\n /* Makes the card clickable. /\n @Prop() clickable: boolean = false;\n\n /* ID for the card, must be unique.\n \n NOTE: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n /\n @Prop() cardId: string = crypto.randomUUID();\n\n /* Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg \|\| this.header \|\| this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}