@progress/kendo-angular-inputs 9.0.0-next.202204011519 → 9.0.0

package/esm2015/textbox/textbox.component.js

@@ -21,6 +21,9 @@ import * as i2 from "./localization/localized-textbox-messages.directive";
 import * as i3 from "@angular/common";
 import * as i4 from "@progress/kendo-angular-common";
 const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 export class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -224,14 +227,15 @@ export class TextBoxComponent {
      * ([see example]({% slug appearance_textbox %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -241,15 +245,16 @@ export class TextBoxComponent {
      * ([see example]({% slug appearance_textbox %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -259,14 +264,15 @@ export class TextBoxComponent {
      * ([see example]({% slug appearance_textbox %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/fesm2015/kendo-angular-inputs.js

@@ -71,17 +71,17 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
         case 'size':
             return {
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
         case 'rounded':
             return {
                 toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
             };
         case 'fillMode':
             return {
                 toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
             };
         default:
             break;
@@ -519,7 +519,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648826206,
+    publishDate: 1650440790,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -1348,7 +1348,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
             dragHandle="Drag"
         >
-        <div class="k-slider-track-wrap" #wrap
+        <div class="k-slider-wrap" #wrap
             [class.k-slider-buttons]="showButtons"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
@@ -1437,7 +1437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
             dragHandle="Drag"
         >
-        <div class="k-slider-track-wrap" #wrap
+        <div class="k-slider-wrap" #wrap
             [class.k-slider-buttons]="showButtons"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
@@ -2251,6 +2251,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const FOCUSED$4 = 'k-focus';
+const DEFAULT_SIZE$7 = 'medium';
+const DEFAULT_THUMB_ROUNDED = 'full';
+const DEFAULT_TRACK_ROUNDED = 'full';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
@@ -2352,14 +2355,15 @@ class SwitchComponent {
      * Specifies the width and height of the Switch.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$7;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -2368,15 +2372,16 @@ class SwitchComponent {
      * Specifies the border radius of the Switch thumb.
      *
      * The possible values are:
-     * * `'full'` (default)
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `null`
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
      */
     set thumbRounded(thumbRounded) {
-        this.handleThumbClasses(thumbRounded);
-        this._thumbRounded = thumbRounded;
+        const newThumbRounded = thumbRounded ? thumbRounded : DEFAULT_THUMB_ROUNDED;
+        this.handleThumbClasses(newThumbRounded);
+        this._thumbRounded = newThumbRounded;
     }
     get thumbRounded() {
         return this._thumbRounded;
@@ -2385,15 +2390,16 @@ class SwitchComponent {
      * Specifies the border radius of the Switch track.
      *
      * The possible values are:
-     * * `'full'` (default)
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `null`
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
      */
     set trackRounded(trackRounded) {
-        this.handleTrackClasses(trackRounded);
-        this._trackRounded = trackRounded;
+        const newTrackRounded = trackRounded ? trackRounded : DEFAULT_TRACK_ROUNDED;
+        this.handleTrackClasses(newTrackRounded);
+        this._trackRounded = newTrackRounded;
     }
     get trackRounded() {
         return this._trackRounded;
@@ -3357,6 +3363,9 @@ const PARSABLE_DEFAULTS = {
     step: 1
 };
 const FOCUSED$3 = 'k-focus';
+const DEFAULT_SIZE$6 = 'medium';
+const DEFAULT_ROUNDED$5 = 'medium';
+const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -3654,14 +3663,15 @@ class NumericTextBoxComponent {
      * The size property specifies padding of the NumericTextBox internal input element
      * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$6;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -3670,14 +3680,15 @@ class NumericTextBoxComponent {
      * The rounded property specifies the border radius of the NumericTextBox
      * ([see example]({% slug appearance_numerictextbox %}#toc-rounded)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -3686,14 +3697,15 @@ class NumericTextBoxComponent {
      * The fillMode property specifies the background and border styles of the NumericTextBox
      * ([see example]({% slug appearance_numerictextbox %}#toc-fillMode)).
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -4844,6 +4856,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 const resolvedPromise = Promise.resolve(null);
 const FOCUSED$2 = 'k-focus';
+const DEFAULT_SIZE$5 = 'medium';
+const DEFAULT_ROUNDED$4 = 'medium';
+const DEFAULT_FILL_MODE$3 = 'solid';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -5035,14 +5050,15 @@ class MaskedTextBoxComponent {
      * The size property specifies the padding of the MaskedTextBox internal input element
      * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$5;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -5051,14 +5067,15 @@ class MaskedTextBoxComponent {
      * The rounded property specifies the border radius of the MaskedTextBox
      * ([see example]({% slug appearance_maskedtextbox %}#toc-rounded)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -5070,11 +5087,12 @@ class MaskedTextBoxComponent {
      * * `flat`
      * * `solid` (default)
      * * `outline`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -6063,6 +6081,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const FOCUSED$1 = 'k-focus';
+const DEFAULT_SIZE$4 = 'medium';
+const DEFAULT_ROUNDED$3 = 'medium';
+const DEFAULT_FILL_MODE$2 = 'solid';
 class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -6266,14 +6287,15 @@ class TextBoxComponent {
      * ([see example]({% slug appearance_textbox %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$4;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -6283,15 +6305,16 @@ class TextBoxComponent {
      * ([see example]({% slug appearance_textbox %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -6301,14 +6324,15 @@ class TextBoxComponent {
      * ([see example]({% slug appearance_textbox %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -7091,6 +7115,9 @@ const resizeClasses = {
     'auto': 'k-resize-none'
 };
 const FOCUSED = 'k-focus';
+const DEFAULT_SIZE$3 = 'medium';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -7244,14 +7271,15 @@ class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$3;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -7261,14 +7289,15 @@ class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -7278,14 +7307,15 @@ class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -11217,6 +11247,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
+const DEFAULT_SIZE$2 = 'medium';
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -11426,14 +11459,15 @@ class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$2;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -11443,15 +11477,16 @@ class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -11461,14 +11496,15 @@ class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -12250,6 +12286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+const DEFAULT_SIZE$1 = 'medium';
+const DEFAULT_ROUNDED = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -12272,14 +12310,15 @@ class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$1;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -12289,14 +12328,15 @@ class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -12379,6 +12419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+const DEFAULT_SIZE = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -12400,14 +12441,15 @@ class RadioButtonDirective {
      * The size property specifies the width and height of the RadioButton
      * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;

package/formfield/models/orientation.d.ts

@@ -4,10 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Specifies the layout orientation of the form fields.
- *
- * The possible values are:
- *
- * * (Default) `vertical`
- * * `horizontal`
+ * @default `vertical`
  */
 export declare type Orientation = 'vertical' | 'horizontal';