@progress/kendo-themes-html 10.2.0-dev.2 → 10.2.0-dev.3

package/dist/cjs/dropdownlist/tests/dropdownlist-adaptive.js

@@ -856,9 +856,63 @@ InputValidationIcon.className = className5;
 
 // src/input/input-prefix.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var className6 = `k-input-prefix`;
+var defaultOptions11 = {
+  direction: "horizontal"
+};
+var InputPrefix = (props) => {
+  const {
+    direction = defaultOptions11.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className6,
+        props.className,
+        {
+          [`k-input-prefix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-suffix.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var className7 = `k-input-suffix`;
+var defaultOptions12 = {
+  direction: "horizontal"
+};
+var InputSuffix = (props) => {
+  const {
+    direction = defaultOptions12.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className7,
+        props.className,
+        {
+          [`k-input-suffix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-prefix-text.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -886,7 +940,7 @@ var options13 = {
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultOptions11 = {
+var defaultOptions13 = {
   showIcon: true,
   icon: "search",
   size: Input.defaultOptions.size,
@@ -907,8 +961,8 @@ var Searchbox = (props) => {
     required,
     loading,
     disabled,
-    showIcon = defaultOptions11.showIcon,
-    icon = defaultOptions11.icon,
+    showIcon = defaultOptions13.showIcon,
+    icon = defaultOptions13.icon,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -939,7 +993,7 @@ var Searchbox = (props) => {
 Searchbox.states = states14;
 Searchbox.options = options13;
 Searchbox.className = SEARCHBOX_CLASSNAME;
-Searchbox.defaultOptions = defaultOptions11;
+Searchbox.defaultOptions = defaultOptions13;
 
 // src/searchbox/templates/searchbox-normal.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -983,14 +1037,14 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var ACTIONBUTTONS_CLASSNAME = `k-actions`;
 var states15 = [];
 var options14 = {};
-var defaultOptions12 = {
+var defaultOptions14 = {
   alignment: "start",
   orientation: "horizontal"
 };
 var ActionButtons = (props) => {
   const {
-    alignment = defaultOptions12.alignment,
-    orientation = defaultOptions12.orientation,
+    alignment = defaultOptions14.alignment,
+    orientation = defaultOptions14.orientation,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -1012,7 +1066,7 @@ var ActionButtons = (props) => {
 ActionButtons.states = states15;
 ActionButtons.options = options14;
 ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
-ActionButtons.defaultOptions = defaultOptions12;
+ActionButtons.defaultOptions = defaultOptions14;
 var action_buttons_spec_default = ActionButtons;
 
 // src/action-sheet/actionsheet-footer.tsx
@@ -1133,8 +1187,8 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 
 // src/nodata/nodata.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var className6 = `k-nodata`;
-var NoData = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: classNames(className6, props.className), children: props.children });
+var className8 = `k-nodata`;
+var NoData = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: classNames(className8, props.className), children: props.children });
 
 // src/list/list.spec.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -1143,12 +1197,12 @@ var states17 = [];
 var options15 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultOptions13 = {
+var defaultOptions15 = {
   size: Size.medium
 };
 var List = (props) => {
   const {
-    size = defaultOptions13.size,
+    size = defaultOptions15.size,
     virtualization,
     children,
     optionLabel,
@@ -1227,7 +1281,7 @@ var List = (props) => {
 List.states = states17;
 List.options = options15;
 List.className = LIST_CLASSNAME;
-List.defaultOptions = defaultOptions13;
+List.defaultOptions = defaultOptions15;
 
 // src/list/list-angular.spec.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -1236,12 +1290,12 @@ var states18 = [];
 var options16 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultOptions14 = {
+var defaultOptions16 = {
   size: Size.medium
 };
 var ListAngular = (props) => {
   const {
-    size = defaultOptions14.size,
+    size = defaultOptions16.size,
     virtualization,
     children,
     ...other
@@ -1322,7 +1376,7 @@ var ListAngular = (props) => {
 ListAngular.states = states18;
 ListAngular.options = options16;
 ListAngular.className = LISTANGULAR_CLASSNAME;
-ListAngular.defaultOptions = defaultOptions14;
+ListAngular.defaultOptions = defaultOptions16;
 
 // src/checkbox/checkbox.spec.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -1341,7 +1395,7 @@ var options17 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
 };
-var defaultOptions15 = {
+var defaultOptions17 = {
   size: Size.medium,
   rounded: Roundness.medium
 };
@@ -1356,8 +1410,8 @@ var Checkbox = (props) => {
     invalid,
     valid,
     required,
-    size = defaultOptions15.size,
-    rounded = defaultOptions15.rounded,
+    size = defaultOptions17.size,
+    rounded = defaultOptions17.rounded,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "k-checkbox-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -1380,19 +1434,19 @@ var Checkbox = (props) => {
 Checkbox.states = states19;
 Checkbox.options = options17;
 Checkbox.className = CHECKBOX_CLASSNAME;
-Checkbox.defaultOptions = defaultOptions15;
+Checkbox.defaultOptions = defaultOptions17;
 
 // src/checkbox/checkbox-group.spec.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var CHECKBOXGROUP_CLASSNAME = `k-checkbox-list`;
 var states20 = [];
 var options18 = {};
-var defaultOptions16 = {
+var defaultOptions18 = {
   layout: "vertical"
 };
 var CheckboxGroup = (props) => {
   const {
-    layout = defaultOptions16.layout,
+    layout = defaultOptions18.layout,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -1413,14 +1467,14 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.states = states20;
 CheckboxGroup.options = options18;
 CheckboxGroup.className = CHECKBOXGROUP_CLASSNAME;
-CheckboxGroup.defaultOptions = defaultOptions16;
+CheckboxGroup.defaultOptions = defaultOptions18;
 
 // src/checkbox/checkbox-item.spec.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var CHECKBOXITEM_CLASSNAME = `k-checkbox-list-item`;
 var states21 = [];
 var options19 = {};
-var defaultOptions17 = {};
+var defaultOptions19 = {};
 var CheckboxItem = (props) => {
   const {
     ...other
@@ -1440,7 +1494,7 @@ var CheckboxItem = (props) => {
 CheckboxItem.states = states21;
 CheckboxItem.options = options19;
 CheckboxItem.className = CHECKBOXITEM_CLASSNAME;
-CheckboxItem.defaultOptions = defaultOptions17;
+CheckboxItem.defaultOptions = defaultOptions19;
 
 // src/checkbox/templates/checkbox-with-label-after.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -1470,7 +1524,7 @@ var states22 = [
   States.disabled
 ];
 var options20 = {};
-var defaultOptions18 = {};
+var defaultOptions20 = {};
 var ListItem = (props) => {
   const {
     text,
@@ -1513,16 +1567,16 @@ var ListItem = (props) => {
 ListItem.states = states22;
 ListItem.options = options20;
 ListItem.className = LISTITEM_CLASSNAME;
-ListItem.defaultOptions = defaultOptions18;
+ListItem.defaultOptions = defaultOptions20;
 
 // src/list/list-content.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var className7 = `k-list-content`;
+var className9 = `k-list-content`;
 var ListContent = (props) => {
   const {
     virtualization
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: classNames(className7, props.className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: classNames(className9, props.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { className: classNames("k-list-ul"), children: props.children }),
     virtualization && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", {}) })
   ] });
@@ -1530,8 +1584,8 @@ var ListContent = (props) => {
 
 // src/list/list-header.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var className8 = `k-list-group-sticky-header`;
-var ListHeader = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: classNames(className8, props.className), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "k-list-header-text", children: props.children }) });
+var className10 = `k-list-group-sticky-header`;
+var ListHeader = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: classNames(className10, props.className), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "k-list-header-text", children: props.children }) });
 
 // src/list/list-group.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -1548,8 +1602,8 @@ var ListGroup = (props) => {
 
 // src/list/list-group-item.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var className9 = `k-list-group-item`;
-var ListGroupItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: classNames(className9, props.className), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "k-list-item-text", children: props.children }) });
+var className11 = `k-list-group-item`;
+var ListGroupItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: classNames(className11, props.className), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "k-list-item-text", children: props.children }) });
 
 // src/list/list-option-label.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -1561,7 +1615,7 @@ var states23 = [
   States.disabled
 ];
 var options21 = {};
-var defaultOptions19 = {};
+var defaultOptions21 = {};
 var ListOptionLabel = (props) => {
   const {
     text,
@@ -1591,7 +1645,7 @@ var ListOptionLabel = (props) => {
 ListOptionLabel.states = states23;
 ListOptionLabel.options = options21;
 ListOptionLabel.className = LIST_OPTIONLABEL_CLASSNAME;
-ListOptionLabel.defaultOptions = defaultOptions19;
+ListOptionLabel.defaultOptions = defaultOptions21;
 
 // src/list/templates/list-normal.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -1614,8 +1668,160 @@ var import_jsx_runtime57 = require("react/jsx-runtime");
 // src/list/templates/list-virualization-grouping-angular.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 
-// src/dropdownlist/tests/dropdownlist-adaptive.tsx
+// src/popup/popup.spec.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
+var POPUP_CLASSNAME = `k-popup`;
+var states24 = [];
+var options22 = {};
+var defaultOptions22 = {
+  positionMode: "absolute"
+};
+var Popup = (props) => {
+  const {
+    offset,
+    positionMode = defaultOptions22.positionMode,
+    animationStyle,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    AnimationContainer,
+    {
+      positionMode,
+      offset,
+      animationStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+    }
+  );
+};
+Popup.states = states24;
+Popup.options = options22;
+Popup.className = POPUP_CLASSNAME;
+Popup.defaultOptions = defaultOptions22;
+
+// src/dropdownlist/dropdownlist.spec.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var DROPDOWNLIST_CLASSNAME = `k-dropdownlist`;
+var states25 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options23 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultOptions23 = {
+  showValue: true,
+  arrowIconName: "caret-alt-down",
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid
+};
+var DropdownList = (props) => {
+  const {
+    size = defaultOptions23.size,
+    rounded = defaultOptions23.rounded,
+    fillMode = defaultOptions23.fillMode,
+    arrowIconName = defaultOptions23.arrowIconName,
+    showValue = defaultOptions23.showValue,
+    valueIconName,
+    prefix,
+    suffix,
+    value,
+    placeholder,
+    hover,
+    focus,
+    valid,
+    invalid,
+    required,
+    loading,
+    disabled,
+    readonly,
+    popup,
+    opened,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      Picker,
+      {
+        ...other,
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        className: classNames(
+          props.className,
+          DROPDOWNLIST_CLASSNAME,
+          {
+            "k-icon-picker": !showValue && valueIconName
+          }
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            InputInnerSpan,
+            {
+              placeholder,
+              value,
+              showValue,
+              valueIconName
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            InputValidationIcon,
+            {
+              valid,
+              invalid,
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            InputLoadingIcon,
+            {
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            Button,
+            {
+              className: "k-input-button",
+              icon: arrowIconName,
+              rounded: null,
+              size: props.size,
+              fillMode: props.fillMode
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Popup, { className: "k-list-container k-dropdownlist-popup", children: popup })
+  ] });
+};
+DropdownList.states = states25;
+DropdownList.options = options23;
+DropdownList.className = DROPDOWNLIST_CLASSNAME;
+DropdownList.defaultOptions = defaultOptions23;
+var dropdownlist_spec_default = DropdownList;
+
+// src/dropdownlist/tests/dropdownlist-adaptive.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         --kendo-actionsheet-height: 400px;
@@ -1628,42 +1834,48 @@ var styles = `
         transform: translateZ(0);
     }
 `;
-var dropdownlist_adaptive_default = () => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: "partial" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: "full screen" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ActionSheet, { adaptive: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "k-list-container", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(List, { size: "large", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "List item" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Hover", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Focus", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Selected", selected: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Hover selected", hover: true, selected: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Disabled", disabled: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Checkbox", showCheckbox: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ActionSheet, { adaptive: true, fullscreen: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "k-list-container", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(List, { size: "large", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "List item" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Hover", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Focus", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Selected", selected: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Hover selected", hover: true, selected: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Disabled", disabled: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Checkbox", showCheckbox: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
-    ] }) })
+var dropdownlist_adaptive_default = () => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: "partial" }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: "full screen" }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(dropdownlist_spec_default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(ActionSheet, { adaptive: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "k-list-container", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(List, { size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "List item" }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Hover", hover: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Focus", focus: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Selected", selected: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Hover selected", hover: true, selected: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Disabled", disabled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Checkbox", showCheckbox: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(dropdownlist_spec_default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(ActionSheet, { adaptive: true, fullscreen: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "k-list-container", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(List, { size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "List item" }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Hover", hover: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Focus", focus: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Selected", selected: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Hover selected", hover: true, selected: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Disabled", disabled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Checkbox", showCheckbox: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
+      ] })
+    ] })
   ] })
 ] });