@progress/kendo-vue-layout 3.6.3 → 3.6.4-dev.202210071340

package/dist/npm/bottomnavigation/BottomNavigationProps.d.ts

@@ -0,0 +1,143 @@
+import { BottomNavigationItemProps } from './BottomNavigationItemProps';
+import { BottomNavigationEvent, BottomNavigationSelectEvent } from './models/events';
+/**
+ * Represents the props of the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
+ */
+export interface BottomNavigationProps {
+    /**
+     * Sets the `id` property of the root BottomNavigation element.
+     */
+    id?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the theme color of the BottomNavigation
+     * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
+     *
+     * The possible values are:
+     * * `primary` (Default) — Applies coloring based on the primary theme color.
+     * * `secondary` — Applies coloring based on the secondary theme color.
+     * * `tertiary` — Applies coloring based on the tertiary theme color.
+     * * `info` — Applies coloring based on the info theme color.
+     * * `success` — Applies coloring based on the success theme color.
+     * * `warning` — Applies coloring based on the warning theme color.
+     * * `error` — Applies coloring based on the error theme color.
+     * * `dark` — Applies coloring based on the dark theme color.
+     * * `light` — Applies coloring based on the light theme color.
+     * * `inverse` — Applies coloring based on the inverted theme color.
+     */
+    themeColor?: BottomNavigationThemeColor | string;
+    /**
+     * The fill style of the BottomNavigation
+     * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
+     *
+     * The possible values are:
+     * * `flat`(Default) — Sets the theme color as the text color. The background will be white.
+     * * `solid` — Sets the theme color as a background color.
+     */
+    fill?: BottomNavigationFill | string;
+    /**
+     * Specifies the position and behavior of the BottomNavigation when the page is scrolled
+     * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
+     *
+     * The possible values are:
+     * * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+     * * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
+     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+     */
+    positionMode?: BottomNavigationPositionMode | string;
+    /**
+     * Specifies how the icon and text label are positioned in each item of the BottomNavigation
+     * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
+     *
+     * The possible values are:
+     * * `vertical`(Default) — Renders the text below the icon.
+     * * `horizontal` — Renders the text and the icon on the same line.
+     */
+    itemFlow?: BottomNavigationItemFlow | string;
+    /**
+     * Sets a border to the BottomNavigation.
+     */
+    border?: boolean;
+    /**
+     * Disables the whole BottomNavigation.
+     */
+    disabled?: boolean;
+    /**
+     * The index of the selected BottomNavigationItem.
+     */
+    selected?: number;
+    /**
+     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
+     */
+    items?: Array<BottomNavigationItemProps>;
+    /**
+     * Overrides the default component's content responsible for visualizing a single item
+     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
+     */
+    item?: any;
+    /**
+     * Fires when a BottomNavigation item is about to be rendered
+     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
+     * Used to override the default appearance of the items.
+     */
+    itemRender?: any;
+    /**
+     * Fires when a BottomNavigation item is selected.
+     */
+    onSelect?: (event: BottomNavigationSelectEvent) => void;
+    /**
+     * Triggered on `onKeyDown` event.
+     */
+    onKeyDown?: (event: BottomNavigationEvent) => void;
+}
+/**
+ * The fill style of the BottomNavigation
+ * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
+ *
+ * The possible values are:
+ * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
+ * * `solid` &mdash; Sets the theme color as a background color.
+ *
+ */
+export declare type BottomNavigationFill = 'solid' | 'flat';
+/**
+ * Specifies how the icon and text label are positioned in each item of the BottomNavigation
+ * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
+ *
+ * The possible values are:
+ * * `vertical`(Default) &mdash; Renders the text below the icon.
+ * * `horizontal` &mdash; Renders the text and the icon on the same line.
+ */
+export declare type BottomNavigationItemFlow = 'vertical' | 'horizontal';
+/**
+ * Specifies the theme color of the BottomNavigationThemeColor.
+ * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
+ *
+ * The possible values are:
+ * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
+ * * `secondary` &mdash; Applies coloring based on the secondary theme color.
+ * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
+ * * `info` &mdash; Applies coloring based on the info theme color.
+ * * `success` &mdash; Applies coloring based on the success theme color.
+ * * `warning` &mdash; Applies coloring based on the warning theme color.
+ * * `error` &mdash; Applies coloring based on the error theme color.
+ * * `dark` &mdash; Applies coloring based on the dark theme color.
+ * * `light` &mdash; Applies coloring based on the light theme color.
+ * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+ */
+export declare type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+/**
+ * Specifies the position and behavior of the BottomNavigation when the page is scrolled
+ * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
+ *
+ * The possible values are:
+ * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+ * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
+ * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+ * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+ */
+export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';

package/dist/npm/bottomnavigation/BottomNavigationProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/bottomnavigation/models/events.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The arguments for the `onSelect` BottomNavigation event.
+ */
+export interface BottomNavigationSelectEvent {
+    /**
+     * A BottomNavigation item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected BottomNavigation item.
+     */
+    itemIndex: number;
+}
+/**
+ * Represents the return type of the BottomNavigation events.
+ */
+export interface BottomNavigationEvent {
+}

package/dist/npm/bottomnavigation/models/events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/bottomnavigation/models/utils.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @hidden
+ */
+export declare const THEME_COLOR_CLASSES: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+    dark: string;
+    light: string;
+    inverse: string;
+};
+/**
+ * @hidden
+ */
+export declare const FILL_CLASSES: {
+    flat: string;
+    solid: string;
+};
+/**
+ * @hidden
+ */
+export declare const ITEM_FLOW_CLASSES: {
+    vertical: string;
+    horizontal: string;
+};
+/**
+ * @hidden
+ */
+export declare const POSITION_MODE_CLASSES: {
+    fixed: string;
+    sticky: string;
+};

package/dist/npm/bottomnavigation/models/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POSITION_MODE_CLASSES = exports.ITEM_FLOW_CLASSES = exports.FILL_CLASSES = exports.THEME_COLOR_CLASSES = void 0;
+/**
+ * @hidden
+ */
+exports.THEME_COLOR_CLASSES = {
+    'primary': 'k-bottom-nav-primary',
+    'secondary': 'k-bottom-nav-secondary',
+    'tertiary': 'k-bottom-nav-tertiary',
+    'info': 'k-bottom-nav-info',
+    'success': 'k-bottom-nav-success',
+    'warning': 'k-bottom-nav-warning',
+    'error': 'k-bottom-nav-error',
+    'dark': 'k-bottom-nav-dark',
+    'light': 'k-bottom-nav-light',
+    'inverse': 'k-bottom-nav-inverse'
+};
+/**
+ * @hidden
+ */
+exports.FILL_CLASSES = {
+    'flat': 'k-bottom-nav-flat',
+    'solid': 'k-bottom-nav-solid'
+};
+/**
+ * @hidden
+ */
+exports.ITEM_FLOW_CLASSES = {
+    'vertical': 'k-bottom-nav-item-flow-vertical',
+    'horizontal': 'k-bottom-nav-item-flow-horizontal'
+};
+/**
+ * @hidden
+ */
+exports.POSITION_MODE_CLASSES = {
+    'fixed': 'k-pos-fixed',
+    'sticky': 'k-pos-sticky'
+};

package/dist/npm/expansionpanel/ExpansionPanel.d.ts

@@ -0,0 +1,42 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ExpansionPanelProps } from './interfaces';
+/**
+ * @hidden
+ */
+interface ExpansionPanelState {
+}
+/**
+ * @hidden
+ */
+interface ExpansionPanelData {
+}
+/**
+ * @hidden
+ */
+export interface ExpansionPanelMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ExpansionPanelComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ExpansionPanelAll extends ExpansionPanelMethods, ExpansionPanelState, ExpansionPanelData, ExpansionPanelComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare const ExpansionPanelVue2: ComponentOptions<Vue2type, DefaultData<ExpansionPanelData>, DefaultMethods<ExpansionPanelAll>, ExpansionPanelComputed, RecordPropsDefinition<ExpansionPanelProps>>;
+/**
+ * @hidden
+ */
+declare let ExpansionPanel: DefineComponent<ExpansionPanelProps, any, ExpansionPanelData, ExpansionPanelComputed, ExpansionPanelMethods, {}, {}, {}, string, ExpansionPanelProps, ExpansionPanelProps, {}>;
+export { ExpansionPanel, ExpansionPanelVue2 };

package/dist/npm/expansionpanel/ExpansionPanel.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpansionPanelVue2 = exports.ExpansionPanel = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var package_metadata_1 = require("../package-metadata");
+/**
+ * @hidden
+ */
+
+
+var ExpansionPanelVue2 = {
+  name: 'KendoExpansionPanel',
+  props: {
+    dir: String,
+    id: String,
+    tabIndex: Number,
+    title: String,
+    subtitle: String,
+    titleRender: [String, Object, Function],
+    subtitleRender: [String, Object, Function],
+    expandIcon: String,
+    collapseIcon: String,
+    expanded: Boolean,
+    disabled: Boolean
+  },
+  created: function created() {
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a = this.$props,
+          expanded = _a.expanded,
+          disabled = _a.disabled;
+      return {
+        'k-expander': true,
+        'k-expanded': expanded,
+        'k-focus': this.focused && !disabled,
+        'k-disabled': disabled
+      };
+    },
+    expandIconClass: function expandIconClass() {
+      var _a;
+
+      var _b = this.$props,
+          expanded = _b.expanded,
+          expandIcon = _b.expandIcon,
+          collapseIcon = _b.collapseIcon;
+      return _a = {
+        'k-icon': true,
+        'k-i-chevron-down': !expanded && !expandIcon,
+        'k-i-chevron-up': expanded && !collapseIcon
+      }, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
+    }
+  },
+  data: function data() {
+    return {
+      focused: false
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = (0, kendo_vue_common_1.getDefaultSlots)(this);
+    var _a = this.$props,
+        _b = _a.expanded,
+        expanded = _b === void 0 ? false : _b,
+        disabled = _a.disabled,
+        title = _a.title,
+        titleRender = _a.titleRender,
+        subtitle = _a.subtitle,
+        subtitleRender = _a.subtitleRender,
+        ariaControls = _a.ariaControls,
+        tabIndex = _a.tabIndex,
+        id = _a.id;
+    var titleTemplate = kendo_vue_common_1.templateRendering.call(this, titleRender, kendo_vue_common_1.getListeners.call(this));
+    var titleToRender = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: titleTemplate,
+      defaultRendering: h("div", {
+        "class": "k-expander-title"
+      }, [title])
+    });
+    var subtitleTemplate = kendo_vue_common_1.templateRendering.call(this, subtitleRender, kendo_vue_common_1.getListeners.call(this));
+    var subtitleToRender = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: subtitleTemplate,
+      defaultRendering: h("div", {
+        "class": "k-expander-sub-title"
+      }, [subtitle])
+    });
+    return h("div", {
+      "class": this.wrapperClass,
+      onFocusin: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur,
+        "keydown": this.onKeyDown
+      },
+      onFocusout: this.handleBlur,
+      id: id // dir={useRtl(elementRef, dir)}
+      ,
+      attrs: this.v3 ? undefined : {
+        id: id
+      },
+      onKeydown: this.onKeyDown
+    }, [h("div", {
+      role: 'button',
+      attrs: this.v3 ? undefined : {
+        role: 'button',
+        "aria-controls": ariaControls,
+        "aria-expanded": expanded,
+        "aria-disabled": disabled,
+        tabIndex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled)
+      },
+      ref: 'header',
+      "aria-controls": ariaControls,
+      "aria-expanded": expanded,
+      "aria-disabled": disabled,
+      tabIndex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
+      "class": "k-expander-header",
+      onClick: this.onClick,
+      on: this.v3 ? undefined : {
+        "click": this.onClick
+      }
+    }, [titleToRender, h("span", {
+      "class": "k-spacer"
+    }), subtitleToRender, h("span", {
+      "class": "k-expander-indicator"
+    }, [h("span", {
+      "class": this.expandIconClass
+    })])]), defaultSlots]);
+  },
+  methods: {
+    onClick: function onClick(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.$emit('action', {
+        event: event,
+        expanded: this.expanded
+      });
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      if ((event.keyCode === kendo_vue_common_1.Keys.enter || event.keyCode === kendo_vue_common_1.Keys.space) && event.target === this.$refs.header) {
+        event.preventDefault();
+        this.$emit('action', {
+          event: event,
+          expanded: this.expanded
+        });
+      }
+    },
+    handleFocus: function handleFocus() {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.focused = true;
+    },
+    handleBlur: function handleBlur() {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.focused = false;
+    }
+  }
+};
+exports.ExpansionPanelVue2 = ExpansionPanelVue2;
+/**
+ * @hidden
+ */
+
+var ExpansionPanel = ExpansionPanelVue2;
+exports.ExpansionPanel = ExpansionPanel;

package/dist/npm/expansionpanel/ExpansionPanelContent.d.ts

@@ -0,0 +1,19 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface ExpansionPanelContentAll extends Vue2type {
+}
+/**
+ * @hidden
+ */
+declare const ExpansionPanelContentVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ExpansionPanelContentAll>, {}, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare let ExpansionPanelContent: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ExpansionPanelContent, ExpansionPanelContentVue2 };

package/dist/npm/expansionpanel/ExpansionPanelContent.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpansionPanelContentVue2 = exports.ExpansionPanelContent = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+
+var package_metadata_1 = require("../package-metadata");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+/**
+ * @hidden
+ */
+
+
+var ExpansionPanelContentVue2 = {
+  name: 'KendoExpansionPanelContent',
+  created: function created() {
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = (0, kendo_vue_common_1.getDefaultSlots)(this);
+    return h("div", {
+      "class": 'k-expander-content-wrapper'
+    }, [h("div", {
+      "class": 'k-expander-content'
+    }, [defaultSlots])]);
+  }
+};
+exports.ExpansionPanelContentVue2 = ExpansionPanelContentVue2;
+/**
+ * @hidden
+ */
+
+var ExpansionPanelContent = ExpansionPanelContentVue2;
+exports.ExpansionPanelContent = ExpansionPanelContent;

package/dist/npm/expansionpanel/interfaces.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The ExpansionPanel ref.
+ */
+export interface ExpansionPanelHandle {
+    /**
+     * The ExpansionPanel element.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * The arguments for the `onAction` ExpansionPanel event.
+ */
+export interface ExpansionPanelActionEvent {
+    /**
+     * Represents the `expanded` state of the ExpansionPanel.
+     */
+    expanded: boolean;
+}
+/**
+ * The props of the ExpansionPanel component.
+ */
+export interface ExpansionPanelProps {
+    /**
+     * Sets additional CSS classes to the ExpansionPanel.
+     */
+    class?: string;
+    /**
+     * Sets the `id` property of the root ExpansionPanel element.
+     */
+    id?: string;
+    /**
+     * Specifies the primary text in the header of the ExpansionPanel.
+     */
+    title?: string;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitle?: string;
+    /**
+     * Specifies the primary text template in the header of the ExpansionPanel.
+     */
+    titleRender?: any;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitleRender?: any;
+    /**
+     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
+     */
+    expandIcon?: string;
+    /**
+     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
+     */
+    collapseIcon?: string;
+    /**
+     * Sets the `dir` property of the ExpansionPanel.
+     */
+    dir?: string;
+    /**
+     * Sets the `tabIndex` property of the ExpansionPanel.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `expanded` state of the ExpansionPanel.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the `disabled` state of the ExpansionPanel.
+     */
+    disabled?: boolean;
+    /**
+     * Sets `aria-controls`. The value should represent the `id` of the controlled content element.
+     */
+    ariaControls?: string;
+    /**
+     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
+     */
+    onAction?: (event: ExpansionPanelActionEvent) => void;
+}

package/dist/npm/expansionpanel/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/expansionpanel/main.d.ts

@@ -0,0 +1,3 @@
+export * from './ExpansionPanel';
+export * from './ExpansionPanelContent';
+export * from './interfaces';

package/dist/npm/expansionpanel/main.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var __createBinding = undefined && undefined.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
+
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+var __exportStar = undefined && undefined.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+__exportStar(require("./ExpansionPanel"), exports);
+
+__exportStar(require("./ExpansionPanelContent"), exports);
+
+__exportStar(require("./interfaces"), exports);