import { h } from '@stencil/core';
import { BEM } from '../../../../../utils/bem';
export const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) => {
  const block = BEM.block('date-calendar');
  const blockBody = block.element('body');
  const blockBodyList = blockBody.element('list');
  return (h("ul", { class: Object.assign(Object.assign(Object.assign({}, blockBodyList.class()), blockBodyList.modifier(name).class()), blockBodyList.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', style: {
      height: `${girdHeight - 2 - 8 - 8}px`,
    }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (h("li", { id: `${name}-${item.value}` }, h("button", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, blockBodyList.element('item').class()), blockBodyList.element('item').modifier('today').class(item.today)), blockBodyList.element('item').modifier('selected').class(item.selected)), blockBodyList.element('item').modifier('disabled').class(item.disabled)), tabIndex: -1, onClick: () => onSelect(item) }, item.label))))));
};
