@zanichelli/albe-web-components 5.6.0 → 6.0.0-rc1

package/dist/collection/components/z-table/z-table-sticky-footer/styles.css

@@ -1,11 +1,11 @@
 :host {
-  display: block;
   position: sticky;
   left: 0;
+  display: block;
   padding: var(--basex2);
-  background-color: var(--bg-white);
+  border-width: var(--border-size-small) 0 var(--border-base);
   border-style: solid;
   border-color: var(--gray200);
-  border-width: var(--border-size-small) 0 var(--border-base);
+  background-color: var(--bg-white);
   font-weight: var(--font-rg);
-}
+}

package/dist/collection/components/z-tag/index.js

@@ -9,7 +9,7 @@ export class ZTag {
   render() {
     return (h(Host, { class: {
         "body-5-sb": true,
-        expandable: this.expandable && !!this.icon,
+        "expandable": this.expandable && !!this.icon,
       } }, this.icon && h("z-icon", { name: this.icon }), h("div", null, h("slot", null))));
   }
   static get is() { return "z-tag"; }

package/dist/collection/components/z-tag/styles.css

@@ -1,27 +1,22 @@
 :host {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
-
   --z-tag-text-color: var(--color-primary03);
   --z-tag-bg: var(--color-hover-primary);
 
-  font-family: var(--font-family-sans);
-
-  border-radius: var(--border-radius);
-  padding: calc(var(--space-unit) / 2);
-  text-transform: uppercase;
-
   display: flex;
   width: fit-content;
-  height: fit-content;
-
   max-width: inherit;
+  height: fit-content;
   max-height: inherit;
-
+  padding: calc(var(--space-unit) / 2);
+  background-color: var(--z-tag-bg);
+  border-radius: var(--border-radius);
   color: var(--z-tag-text-color);
   fill: var(--z-tag-text-color);
-  background-color: var(--z-tag-bg);
+  font-family: var(--font-family-sans);
   line-height: 14px;
+  text-transform: uppercase;
 }
 
 :host > z-icon {
@@ -40,9 +35,9 @@
 }
 
 :host(.expandable) > div {
+  overflow: hidden;
   max-width: 0;
   max-height: 0;
-  overflow: hidden;
 }
 
 :host(.expandable:hover) > div {

package/dist/collection/components/z-visually-hidden/styles.css

@@ -1,12 +1,12 @@
 :host {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
   border: 0;
+  margin: 0 -1px -1px 0;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
   white-space: nowrap;
 }

package/dist/collection/constants/icons.js

@@ -1,6 +1,6 @@
 const icons = {
   iconuserlogo: "user.png",
   iconarrowup: "arrowUp.png",
-  iconarrowdown: "arrowDown.png"
+  iconarrowdown: "arrowDown.png",
 };
 export default icons;

package/dist/collection/deprecated/pagination/z-pagination-bar/index.js

@@ -17,7 +17,7 @@ export class ZPaginationBar {
   }
   componentDidLoad() {
     this.scrollPage = this.scrollPage.bind(this);
-    let mc = new Hammer(this.bar);
+    const mc = new Hammer(this.bar);
     // listen to events...
     mc.on("swiperight", this.scrollPage);
     mc.on("swipeleft", this.scrollPage);
@@ -38,28 +38,18 @@ export class ZPaginationBar {
     this.listhistoryrow = [...JSON.parse(historyraw)];
   }
   scrollPage(ev) {
-    let vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
+    const vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
     const deltaPage = Math.max(1, vel);
     switch (ev.type) {
       case "swiperight":
-        if (!this.canNavigateLeft())
-          break;
-        const newstartPage1 = this.startpage - deltaPage;
-        if (newstartPage1 > 1)
-          this.emitChangeStartPage(newstartPage1);
-        else
-          this.emitChangeStartPage(1);
+        if (this.canNavigateLeft()) {
+          this.emitChangeStartPage(Math.max(1, this.startpage - deltaPage));
+        }
         break;
       case "swipeleft":
-        if (!this.canNavigateRight())
-          break;
-        const newstartPage2 = this.startpage + deltaPage;
-        if (newstartPage2 < this.pages - this.visiblepages + 1)
-          this.emitChangeStartPage(newstartPage2);
-        else
-          this.emitChangeStartPage(this.pages - this.visiblepages + 1);
-        break;
-      default:
+        if (this.canNavigateRight()) {
+          this.emitChangeStartPage(Math.min(this.startpage + deltaPage, this.pages - this.visiblepages + 1));
+        }
         break;
     }
   }
@@ -72,10 +62,6 @@ export class ZPaginationBar {
     this.startpage = startpage;
     this.changeStartPage.emit({ startpage: startpage });
   }
-  emitAddPageToHistory(page) {
-    this.listhistoryrow.push(page);
-    this.changeStartPage.emit({ page: page });
-  }
   loadPages() {
     this.currentPages.splice(0);
     const lastPage = this.pageWindow();
@@ -108,7 +94,7 @@ export class ZPaginationBar {
     }
   }
   render() {
-    return (h("div", { ref: el => (this.bar = el) }, h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map(page => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
+    return (h("div", { ref: (el) => (this.bar = el) }, h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map((page) => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
   }
   static get is() { return "z-pagination-bar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/pagination/z-pagination-bar/styles.css

@@ -1,23 +1,22 @@
 :host > div {
+  display: flex;
   height: 48px;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-around;
-	align-items: center;
-	align-content: center;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: space-around;
 }
 
 :host > div > z-icon {
-  cursor: pointer;
   margin: calc(var(--space-unit) * 2) 0;
   color: var(--color-primary01);
+  cursor: pointer;
   fill: var(--color-primary01);
 }
 
 :host > div > z-icon.disabled {
-  cursor: default;
-  pointer-events: none;
   color: var(--color-disabled01);
+  cursor: default;
   fill: var(--color-disabled01);
+  pointer-events: none;
 }

package/dist/collection/deprecated/pagination/z-pagination-page/styles.css

@@ -1,34 +1,34 @@
 :host {
+  display: inline-block;
   font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
-  display: inline-block;
 }
 
 :host > button {
-  cursor: pointer;
-  outline: none;
   display: inline-block;
-  box-sizing: border-box;
-  margin: 0;
+  min-width: 56px;
   height: 48px;
-  line-height: 48px;
-  text-align: center;
+  box-sizing: border-box;
   border: none;
   border-bottom: var(--border-size-large) solid transparent;
+  margin: 0;
+  background: transparent;
   color: var(--color-primary01);
-  font-size: var(--font-size-2);
+  cursor: pointer;
   font-family: var(--font-family-sans);
+  font-size: var(--font-size-2);
   font-weight: inherit;
-  background: transparent;
+  line-height: 48px;
+  outline: none;
+  text-align: center;
   text-decoration: none;
   transition: border-bottom 0.2s ease, font-size 0.2s ease;
-  min-width: 56px;
 }
 
 :host > button[disabled] {
-  pointer-events: none;
-  cursor: default;
   color: var(--color-disabled02);
+  cursor: default;
+  pointer-events: none;
 }
 
 :host > button:hover {
@@ -40,8 +40,8 @@
 
 :host > button:focus {
   border-bottom: var(--border-size-large) solid var(--color-hover-light);
-  box-shadow: var(--shadow-focus-primary);
   background-color: var(--color-background);
+  box-shadow: var(--shadow-focus-primary);
   text-decoration: none;
 }
 

package/dist/collection/deprecated/z-button-deprecated/index.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import classNames from "classnames";
-import { ButtonVariantEnum, ButtonTypeEnum, ButtonSizeEnum, } from "../../beans";
+import { ButtonVariant, ButtonType, ButtonSize } from "../../beans";
 /**
  * @slot - button label
  */
@@ -9,11 +8,11 @@ export class ZButtonDeprecated {
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
-    this.type = ButtonTypeEnum.button;
+    this.type = ButtonType.BUTTON;
     /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
-    this.variant = ButtonVariantEnum.primary;
+    this.variant = ButtonVariant.PRIMARY;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ButtonSizeEnum.big;
+    this.size = ButtonSize.BIG;
     /** Reduce button size (deprecated).
      * @deprecated Use `size` prop.
      */
@@ -23,7 +22,12 @@ export class ZButtonDeprecated {
   }
   render() {
     this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (h("slot", { name: "element" }, h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classNames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) }, this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }), h("slot", null))));
+    return (h("slot", { name: "element" }, h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: {
+        [this.variant]: true,
+        [this.size]: true,
+        issmall: this.issmall,
+        square: this.square,
+      } }, this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null))));
   }
   static get is() { return "z-button-deprecated"; }
   static get encapsulation() { return "shadow"; }
@@ -95,11 +99,12 @@ export class ZButtonDeprecated {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "HTMLButtonElement[\"type\"]",
-          "resolved": "string",
+          "original": "ButtonType",
+          "resolved": "ButtonType.BUTTON | ButtonType.RESET | ButtonType.SUBMIT",
           "references": {
-            "HTMLButtonElement": {
-              "location": "global"
+            "ButtonType": {
+              "location": "import",
+              "path": "../../beans"
             }
           }
         },
@@ -111,16 +116,16 @@ export class ZButtonDeprecated {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "ButtonTypeEnum.button"
+        "defaultValue": "ButtonType.BUTTON"
       },
       "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonVariantBean",
-          "resolved": "(typeof ButtonVariantEnum)[\"dark-bg\"] | ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary",
+          "original": "ButtonVariant",
+          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
           "references": {
-            "ButtonVariantBean": {
+            "ButtonVariant": {
               "location": "import",
               "path": "../../beans"
             }
@@ -134,7 +139,7 @@ export class ZButtonDeprecated {
         },
         "attribute": "variant",
         "reflect": true,
-        "defaultValue": "ButtonVariantEnum.primary"
+        "defaultValue": "ButtonVariant.PRIMARY"
       },
       "icon": {
         "type": "string",
@@ -157,10 +162,10 @@ export class ZButtonDeprecated {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonSizeEnum",
-          "resolved": "(typeof ButtonSizeEnum)[\"x-small\"] | ButtonSizeEnum.big | ButtonSizeEnum.small",
+          "original": "ButtonSize",
+          "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL",
           "references": {
-            "ButtonSizeEnum": {
+            "ButtonSize": {
               "location": "import",
               "path": "../../beans"
             }
@@ -174,7 +179,7 @@ export class ZButtonDeprecated {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "ButtonSizeEnum.big"
+        "defaultValue": "ButtonSize.BIG"
       },
       "issmall": {
         "type": "boolean",

package/dist/collection/deprecated/z-button-deprecated/styles.css

@@ -4,7 +4,7 @@
   --z-icon-width: 16px;
   --z-icon-height: 16px;
   --z-icon-right-margin: var(--space-unit);
-  --rgb-white: 240, 240, 240
+  --rgb-white: 240, 240, 240;
 }
 
 button:disabled,
@@ -15,55 +15,55 @@ button:disabled,
 button,
 ::slotted(button),
 ::slotted(a) {
-  box-sizing: border-box;
   display: inline-flex;
+  width: 100%;
+  box-sizing: border-box;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 1;
-  letter-spacing: 0.3px;
   border-width: var(--border-size-medium);
   border-style: solid;
   border-radius: var(--border-radius);
-  vertical-align: middle;
-  text-transform: uppercase;
-  text-decoration: none;
   cursor: pointer;
-  white-space: nowrap;
+  fill: currentcolor;
+  font-family: var(--dashboard-font);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0.3px;
+  line-height: 1;
   outline: none;
-  fill: currentColor;
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: middle;
+  white-space: nowrap;
 }
 
 button.big,
 :host([size="big"]) ::slotted(button),
 :host([size="big"]) ::slotted(a) {
-  height: 44px;
   min-width: 44px;
+  height: 44px;
 }
 
 button.small,
 :host([size="small"]) ::slotted(button),
 :host([size="small"]) ::slotted(a) {
-  height: 36px;
   min-width: 36px;
+  height: 36px;
 }
 
 button.issmall,
 :host([issmall]) ::slotted(button),
 :host([issmall]) ::slotted(a) {
-  height: 36px;
   min-width: 36px;
+  height: 36px;
 }
 
 button.x-small,
 :host([size="x-small"]) ::slotted(button),
 :host([size="x-small"]) ::slotted(a) {
-  height: 32px;
   min-width: 32px;
+  height: 32px;
 }
 
 button:not(.square),
@@ -81,8 +81,8 @@ button.square,
 button.primary,
 :host([variant="primary"]) ::slotted(button),
 :host([variant="primary"]) ::slotted(a) {
-  background-color: var(--color-primary01);
   border-color: var(--color-primary01);
+  background-color: var(--color-primary01);
   color: var(--color-text-inverse);
 }
 
@@ -90,8 +90,8 @@ button.primary,
   button.primary:hover,
   :host([variant="primary"]) ::slotted(button:hover),
   :host([variant="primary"]) ::slotted(a:hover) {
-    background-color: var(--color-hover-primary);
     border-color: var(--color-hover-primary);
+    background-color: var(--color-hover-primary);
     color: var(--color-text-inverse);
   }
 }
@@ -105,24 +105,24 @@ button:focus:focus-visible,
 button.primary:active,
 :host([variant="primary"]) ::slotted(button:active),
 :host([variant="primary"]) ::slotted(a:active) {
-  background-color: var(--color-pressed-primary);
   border-color: var(--color-pressed-primary);
-  color: var(--color-text-inverse);
+  background-color: var(--color-pressed-primary);
   box-shadow: var(--shadow-2);
+  color: var(--color-text-inverse);
 }
 
 button.primary:disabled,
 :host([variant="primary"]) ::slotted(button:disabled) {
-  background-color: var(--color-disabled01);
   border-color: var(--color-disabled01);
+  background-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
 button.secondary,
 :host([variant="secondary"]) ::slotted(button),
 :host([variant="secondary"]) ::slotted(a) {
-  background-color: var(--color-surface01);
   border-color: var(--color-primary01);
+  background-color: var(--color-surface01);
   color: var(--color-primary01);
 }
 
@@ -130,8 +130,8 @@ button.secondary,
   button.secondary:hover,
   :host([variant="secondary"]) ::slotted(button:hover),
   :host([variant="secondary"]) ::slotted(a:hover) {
-    background-color: var(--color-surface01);
     border-color: var(--color-hover-primary);
+    background-color: var(--color-surface01);
     color: var(--color-hover-primary);
   }
 }
@@ -139,28 +139,28 @@ button.secondary,
 button.secondary:active,
 :host([variant="secondary"]) ::slotted(button:active),
 :host([variant="secondary"]) ::slotted(a:active) {
-  background-color: var(--color-surface01);
   border-color: var(--color-pressed-primary);
-  color: var(--color-pressed-primary);
+  background-color: var(--color-surface01);
   box-shadow: var(--shadow-2);
+  color: var(--color-pressed-primary);
 }
 
 button.secondary:disabled,
 :host([variant="secondary"]) ::slotted(button:disabled) {
-  background-color: var(--color-surface01);
   border-color: var(--color-disabled01);
+  background-color: var(--color-surface01);
   color: var(--color-disabled02);
 }
 
 button.tertiary,
 :host([variant="tertiary"]) ::slotted(button),
 :host([variant="tertiary"]) ::slotted(a) {
-  background-color: transparent;
   border-color: transparent;
+  background-color: transparent;
   color: var(--color-primary01);
 }
 
-button.tertiary.hasContent {
+button.tertiary.has-content {
   padding: 0 var(--space-unit);
 }
 
@@ -168,8 +168,8 @@ button.tertiary.hasContent {
   button.tertiary:hover,
   :host([variant="tertiary"]) ::slotted(button:hover),
   :host([variant="tertiary"]) ::slotted(a:hover) {
-    background-color: var(--color-primary03);
     border-color: var(--color-primary03);
+    background-color: var(--color-primary03);
     color: var(--color-hover-primary);
   }
 }
@@ -177,36 +177,36 @@ button.tertiary.hasContent {
 button.tertiary:focus:focus-visible,
 :host([variant="tertiary"]) ::slotted(button:focus:focus-visible),
 :host([variant="tertiary"]) ::slotted(a:focus:focus-visible) {
-  background-color: var(--color-surface01);
   border-color: var(--color-surface01);
+  background-color: var(--color-surface01);
   color: var(--color-primary01);
 }
 
 button.tertiary:active,
 :host([variant="tertiary"]) ::slotted(button:active),
 :host([variant="tertiary"]) ::slotted(a:active) {
-  background-color: var(--color-surface01);
   border-color: var(--color-surface01);
-  color: var(--color-primary01);
+  background-color: var(--color-surface01);
   box-shadow: var(--shadow-2);
+  color: var(--color-primary01);
 }
 
 button.tertiary:disabled,
 :host([variant="tertiary"]) ::slotted(button:disabled) {
-  background-color: transparent;
   border-color: transparent;
+  background-color: transparent;
   color: var(--color-disabled02);
 }
 
 button.dark-bg,
 :host([variant="dark-bg"]) ::slotted(button),
 :host([variant="dark-bg"]) ::slotted(a) {
-  background-color: rgba(var(--rgb-white), 0.2);
   border-color: transparent;
+  background-color: rgb(var(--rgb-white) 0.2);
   color: var(--color-text04);
 }
 
-button.dark-bg.hasContent {
+button.dark-bg.has-content {
   padding: 0 var(--space-unit);
 }
 
@@ -214,18 +214,18 @@ button.dark-bg.hasContent {
   button.dark-bg:hover,
   :host([variant="dark-bg"]) ::slotted(button:hover),
   :host([variant="dark-bg"]) ::slotted(a:hover) {
-    background-color: rgba(var(--rgb-white), 0.1);
+    background-color: rgb(var(--rgb-white) 0.1);
   }
 }
 
 button.dark-bg:active,
 :host([variant="dark-bg"]) ::slotted(button:active),
 :host([variant="dark-bg"]) ::slotted(a:active) {
-  background-color: rgba(var(--rgb-white), 0.3);
+  background-color: rgb(var(--rgb-white) 0.3);
 }
 
 button.dark-bg:disabled,
 :host([variant="dark-bg"]) ::slotted(button:disabled) {
+  background-color: rgb(var(--rgb-white) 0.05);
   color: var(--color-disabled03);
-  background-color: rgba(var(--rgb-white), 0.05);
 }

package/dist/collection/deprecated/z-button-filter/index.js

@@ -21,8 +21,9 @@ export class ZButtonFilter {
     return (h("button", { class: `container isactive ${this.issmall ? "small" : ""}`, onClick: this.handleRemovingFilterClick }, this.renderIcon(), this.renderContent(filtername)));
   }
   renderIcon() {
-    if (!this.hasicon)
+    if (!this.hasicon) {
       return null;
+    }
     return (h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 }));
   }
   renderContent(filtername) {

package/dist/collection/deprecated/z-button-filter/styles.css

@@ -1,27 +1,17 @@
 button.container {
   min-height: 32px;
-  line-height: 32px;
-
+  padding: 0 calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--bg-grey-200);
   border-radius: 16px;
-
-  box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
-  -webkit-box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
-  -moz-box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
-
-  text-align: center;
-
-  padding: 0 calc(var(--space-unit) * 2);
-
+  box-shadow: 0 2px 5px 0 var(--bg-neutral-300);
   cursor: pointer;
-
-  letter-spacing: 0.17px;
   font-family: var(--dashboard-font);
   font-size: 12px;
   font-weight: var(--font-sb);
-
+  letter-spacing: 0.17px;
+  line-height: 32px;
   opacity: 1;
-
+  text-align: center;
   transition: all 200ms linear;
 }
 
@@ -62,9 +52,9 @@ button.container.isactive:hover {
 }
 
 button.container.isactive:focus {
-  background-color: var(--myz-blue-dark);
   border-color: var(--myz-blue-dark);
-  box-shadow: 0px 0px 4px 0px var(--text-grey-800);
+  background-color: var(--myz-blue-dark);
+  box-shadow: 0 0 4px 0 var(--text-grey-800);
   color: var(--bg-white);
   fill: var(--bg-white);
 }