@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

package/dist/collection/components/card/card.js

@@ -11,6 +11,35 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsCard {
     constructor() {
+        /** Variant of the Card based on the theme used. */
+        this.modeVariant = null;
+        /** Placement of the header */
+        this.imagePlacement = 'below-header';
+        /** Divider for the body */
+        this.bodyDivider = false;
+        /** Makes the Card clickable. */
+        this.clickable = false;
+        this.stretch = false;
+        /** ID for the Card, must be unique.
+         *
+         * **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.
+         */
+        this.cardId = generateUniqueId();
+        /**
+         * Enables expandable behaviour.
+         * When true, clicking the header toggles content visibility.
+         */
+        this.expandable = false;
+        /**
+         * Tracks the current expanded state when expandable is enabled.
+         */
+        this.expanded = false;
+        this.toggleExpand = () => {
+            if (this.expandable) {
+                this.expanded = !this.expanded;
+            }
+        };
         this.handleClick = () => {
             this.tdsClick.emit({
                 cardId: this.cardId,
@@ -20,7 +49,7 @@ export class TdsCard {
             const usesHeaderSlot = hasSlot('header', this.host);
             const usesSubheaderSlot = hasSlot('subheader', this.host);
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
-            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+            return (h("div", { class: { 'card-header': true, 'expandable': this.expandable, 'expanded': this.expanded } }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), this.expandable && (h("tds-button", { type: "button", variant: "ghost", size: "sm", "tds-aria-label": "Toggle card content", "aria-expanded": this.expanded ? 'true' : 'false', onClick: this.toggleExpand }, h("tds-icon", { slot: "icon", size: "16px", name: "chevron_down", svgTitle: "Chevron Down", class: { rotated: this.expanded } })))));
         };
         this.getCardContent = () => {
             const usesBodySlot = hasSlot('body', this.host);
@@ -29,16 +58,6 @@ export class TdsCard {
             const bodyId = `body-${this.cardId}`;
             return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
-        this.modeVariant = null;
-        this.imagePlacement = 'below-header';
-        this.header = undefined;
-        this.subheader = undefined;
-        this.bodyImg = undefined;
-        this.bodyImgAlt = undefined;
-        this.bodyDivider = false;
-        this.clickable = false;
-        this.stretch = false;
-        this.cardId = generateUniqueId();
     }
     render() {
         const cardStyle = {
@@ -48,7 +67,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '39dde374a44320884af4b8a0da33e24c983417c5', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '14e4d2ece54e021a186661c8dfef2dae78791782', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -78,8 +97,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Variant of the Card based on the theme used."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "imagePlacement": {
@@ -96,8 +117,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Placement of the header"
                 },
-                "attribute": "image-placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "image-placement",
                 "defaultValue": "'below-header'"
             },
             "header": {
@@ -114,8 +137,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Text in the header"
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "subheader": {
                 "type": "string",
@@ -131,8 +156,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Subheader text in the header"
                 },
-                "attribute": "subheader",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheader"
             },
             "bodyImg": {
                 "type": "string",
@@ -148,8 +175,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Body image src"
                 },
-                "attribute": "body-img",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "body-img"
             },
             "bodyImgAlt": {
                 "type": "string",
@@ -165,8 +194,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Alt text for the body image"
                 },
-                "attribute": "body-img-alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "body-img-alt"
             },
             "bodyDivider": {
                 "type": "boolean",
@@ -182,8 +213,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Divider for the body"
                 },
-                "attribute": "body-divider",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "body-divider",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -200,8 +233,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Makes the Card clickable."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "clickable",
                 "defaultValue": "false"
             },
             "stretch": {
@@ -218,8 +253,10 @@ export class TdsCard {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "stretch",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "stretch",
                 "defaultValue": "false"
             },
             "cardId": {
@@ -236,9 +273,51 @@ export class TdsCard {
                     "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,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "card-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "card-id",
                 "defaultValue": "generateUniqueId()"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables expandable behaviour.\nWhen true, clicking the header toggles content visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tracks the current expanded state when expandable is enabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/checkbox/checkbox.js

@@ -5,6 +5,16 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsCheckbox {
     constructor() {
+        /** ID for the Checkbox's input element. Randomly generated if not specified. */
+        this.checkboxId = generateUniqueId();
+        /** Sets the Checkbox in a disabled state */
+        this.disabled = false;
+        /** Make the Checkbox required */
+        this.required = false;
+        /** Sets the Checkbox as checked */
+        this.checked = false;
+        /** Sets the Checkbox as indeterminate */
+        this.indeterminate = false;
         this.handleChange = () => {
             this.checked = !this.checked;
             this.indeterminate = false;
@@ -15,15 +25,6 @@ export class TdsCheckbox {
                 value: this.value,
             });
         };
-        this.name = undefined;
-        this.checkboxId = generateUniqueId();
-        this.disabled = false;
-        this.required = false;
-        this.checked = false;
-        this.indeterminate = false;
-        this.value = undefined;
-        this.tdsAriaLabel = undefined;
-        this.tdsAriaDescribedby = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -93,8 +94,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Name for the Checkbox's input element."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "checkboxId": {
                 "type": "string",
@@ -110,8 +113,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "ID for the Checkbox's input element. Randomly generated if not specified."
                 },
-                "attribute": "checkbox-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checkbox-id",
                 "defaultValue": "generateUniqueId()"
             },
             "disabled": {
@@ -128,8 +133,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Sets the Checkbox in a disabled state"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "required": {
@@ -146,8 +153,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Make the Checkbox required"
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "checked": {
@@ -164,8 +173,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Sets the Checkbox as checked"
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "indeterminate": {
@@ -182,8 +193,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Sets the Checkbox as indeterminate"
                 },
-                "attribute": "indeterminate",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "indeterminate",
                 "defaultValue": "false"
             },
             "value": {
@@ -200,8 +213,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Value for the Checkbox"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "tdsAriaLabel": {
                 "type": "string",
@@ -217,8 +232,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             },
             "tdsAriaDescribedby": {
                 "type": "string",
@@ -234,8 +251,10 @@ export class TdsCheckbox {
                     "tags": [],
                     "text": "Value to be used for the aria-describedby attribute"
                 },
-                "attribute": "tds-aria-describedby",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-describedby"
             }
         };
     }

package/dist/collection/components/chip/chip.css

@@ -19,16 +19,19 @@
   letter-spacing: var(--tds-detail-02-ls);
   display: inline-flex;
   align-items: center;
-  border-radius: 16px;
+  border-radius: 32px;
+  border: 1px solid var(--tds-chips-border);
   cursor: pointer;
   white-space: nowrap;
 }
 .component .tds-chip-component label:hover {
   background-color: var(--tds-chips-background-hover);
+  border-color: var(--tds-chips-border-hover);
 }
 .component .tds-chip-component.disabled label {
   background-color: var(--tds-chips-background-disabled);
   color: var(--tds-chips-text-disabled);
+  border-color: transparent;
   cursor: default;
   pointer-events: none;
 }
@@ -38,38 +41,40 @@
 .component .tds-chip-component.disabled input[type=radio]:checked:disabled + label {
   background-color: var(--tds-chips-background-active-disabled);
   color: var(--tds-chips-text-checked-disabled);
+  border-color: transparent;
 }
 .component .tds-chip-component.disabled input[type=checkbox]:checked:disabled + label {
   background-color: var(--tds-chips-background-active-disabled);
   color: var(--tds-chips-text-checked-disabled);
+  border-color: transparent;
 }
 .component .tds-chip-component.lg label {
-  height: 32px;
-  padding: 0 16px;
-  gap: 8px;
+  height: 16px;
+  padding: 8px 16px;
+  gap: 6px;
 }
 .component .tds-chip-component.sm label {
-  height: 24px;
-  padding: 0 12px;
-  gap: 6px;
+  height: 16px;
+  padding: 4px 12px;
+  gap: 4px;
 }
 .component .tds-chip-component.sm.prefix label {
-  padding: 0 12px 0 6px;
+  padding: 4px 12px 4px 8px;
 }
 .component .tds-chip-component.sm.suffix label {
-  padding: 0 6px 0 12px;
+  padding: 4px 8px 4px 12px;
 }
 .component .tds-chip-component.lg.prefix label {
-  padding: 0 16px 0 8px;
+  padding: 8px 16px 8px 10px;
 }
 .component .tds-chip-component.lg.suffix label {
-  padding: 0 8px 0 16px;
-}
-.component .tds-chip-component.lg.prefix.suffix label {
-  padding: 0 8px;
+  padding: 8px 10px 8px 16px;
 }
 .component .tds-chip-component.sm.prefix.suffix label {
-  padding: 0 6px;
+  padding: 4px 8px;
+}
+.component .tds-chip-component.lg.prefix.suffix label {
+  padding: 8px 10px;
 }
 .component .tds-chip-component input {
   opacity: 0;
@@ -82,11 +87,14 @@
   outline-offset: 1px;
   z-index: 1;
   background-color: var(--tds-chips-background-focus);
+  border-color: transparent;
 }
 .component .tds-chip-component input:checked + label {
   background-color: var(--tds-chips-background-active);
   color: var(--tds-chips-color-active);
+  border-color: var(--tds-chips-background-active);
 }
 .component .tds-chip-component input:checked + label:hover {
   background-color: var(--tds-chips-background-active-hover);
+  border-color: var(--tds-chips-border-selected-hover);
 }

package/dist/collection/components/chip/chip.js

@@ -8,6 +8,20 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsChip {
     constructor() {
+        /** Type of Chip, depends on usage */
+        this.type = 'button';
+        /** Size of the Chip component */
+        this.size = 'lg';
+        /** ID used for internal Chip functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,
+         * as the default ID is random and will be different every time.
+         */
+        this.chipId = generateUniqueId();
+        /** Controls component's checked attribute. Valid only for type checkbox and radio. */
+        this.checked = false;
+        /** Sets the Chip in a disabled state */
+        this.disabled = false;
         this.handleChange = () => {
             if (!this.disabled) {
                 // Only proceed if not disabled
@@ -40,14 +54,6 @@ export class TdsChip {
                 });
             }
         };
-        this.type = 'button';
-        this.size = 'lg';
-        this.chipId = generateUniqueId();
-        this.checked = false;
-        this.name = undefined;
-        this.value = undefined;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
     }
     handleInternaRadioChange(event) {
         const { chipId, checked, groupName } = event.detail;
@@ -111,8 +117,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Type of Chip, depends on usage"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "size": {
@@ -129,8 +137,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Size of the Chip component"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "chipId": {
@@ -147,8 +157,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "ID used for internal Chip functionality and events, must be unique.\n\n**NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "chip-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "chip-id",
                 "defaultValue": "generateUniqueId()"
             },
             "checked": {
@@ -165,8 +177,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Controls component's checked attribute. Valid only for type checkbox and radio."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "name": {
@@ -183,8 +197,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
@@ -200,8 +216,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Value of input. Valid only for type checkbox and radio."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
@@ -217,8 +235,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Sets the Chip in a disabled state"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -235,8 +255,10 @@ export class TdsChip {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }