@qite/tide-booking-component 1.4.95 → 1.4.97

package/package.json

@@ -1,83 +1,83 @@
-{
-  "name": "@qite/tide-booking-component",
-  "version": "1.4.95",
-  "description": "React Booking wizard & Booking product component for Tide",
-  "main": "build/build-cjs/index.js",
-  "types": "build/build-cjs/src/index.d.ts",
-  "module": "build/build-esm/index.js",
-  "scripts": {
-    "use-node": "powershell -Command \"nvm use (Get-Content .nvmrc)\"",
-    "start": "rollup -c -w",
-    "build": "rollup -c",
-    "tsc": "tsc --noEmit",
-    "format": "prettier --write .",
-    "prepare": "husky"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
-  },
-  "keywords": [
-    "tide",
-    "booking",
-    "react",
-    "component"
-  ],
-  "author": "Qite",
-  "license": "OBSD",
-  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
-  "devDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.154",
-    "@reduxjs/toolkit": "^2.8.2",
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@types/flat": "^5.0.2",
-    "@types/he": "^1.2.3",
-    "@types/lodash": "^4.14.171",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/uuid": "^8.3.1",
-    "date-fns": "^4.1.0",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "husky": "^9.1.7",
-    "lodash": "^4.17.21",
-    "prettier": "^2.3.2",
-    "react-popper": "^2.2.5",
-    "react-redux": "^9.2.0",
-    "rollup": "^2.53.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "0.36.0",
-    "tslib": "^2.3.1",
-    "typescript": "^5.9.3",
-    "uuid": "^11.1.0"
-  },
-  "peerDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@reduxjs/toolkit": "^2.8.2",
-    "date-fns": "^4.1.0",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "immer": "^9.0.5",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.2.5",
-    "react-redux": "^9.2.0",
-    "react-router": "^6.30.3",
-    "uuid": "^11.1.0"
-  },
-  "dependencies": {
-    "he": "^1.2.0",
-    "jwt-decode": "^4.0.0",
-    "react-html-comment": "^2.0.16",
-    "react-router-dom": "^6.30.3",
-    "signalr-no-jquery": "^0.2.1",
-    "yup": "^1.6.1"
-  }
-}
+{
+  "name": "@qite/tide-booking-component",
+  "version": "1.4.97",
+  "description": "React Booking wizard & Booking product component for Tide",
+  "main": "build/build-cjs/index.js",
+  "types": "build/build-cjs/src/index.d.ts",
+  "module": "build/build-esm/index.js",
+  "scripts": {
+    "use-node": "powershell -Command \"nvm use (Get-Content .nvmrc)\"",
+    "start": "rollup -c -w",
+    "build": "rollup -c",
+    "tsc": "tsc --noEmit",
+    "format": "prettier --write .",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
+  },
+  "keywords": [
+    "tide",
+    "booking",
+    "react",
+    "component"
+  ],
+  "author": "Qite",
+  "license": "OBSD",
+  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
+  "devDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@qite/tide-client": "^1.1.154",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@types/flat": "^5.0.2",
+    "@types/he": "^1.2.3",
+    "@types/lodash": "^4.14.171",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/uuid": "^8.3.1",
+    "date-fns": "^4.1.0",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "husky": "^9.1.7",
+    "lodash": "^4.17.21",
+    "prettier": "^2.3.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^9.2.0",
+    "rollup": "^2.53.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "0.36.0",
+    "tslib": "^2.3.1",
+    "typescript": "^5.9.3",
+    "uuid": "^11.1.0"
+  },
+  "peerDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@reduxjs/toolkit": "^2.8.2",
+    "date-fns": "^4.1.0",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "immer": "^9.0.5",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.2.5",
+    "react-redux": "^9.2.0",
+    "react-router": "^6.30.3",
+    "uuid": "^11.1.0"
+  },
+  "dependencies": {
+    "he": "^1.2.0",
+    "jwt-decode": "^4.0.0",
+    "react-html-comment": "^2.0.16",
+    "react-router-dom": "^6.30.3",
+    "signalr-no-jquery": "^0.2.1",
+    "yup": "^1.6.1"
+  }
+}

package/rollup.config.js

@@ -1,16 +1,16 @@
-import commonjs from '@rollup/plugin-commonjs';
-import del from 'rollup-plugin-delete';
-import json from '@rollup/plugin-json';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import packageJson from './package.json';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import typescript from 'rollup-plugin-typescript2';
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    { file: packageJson.main, format: 'cjs', banner: '/* eslint-disable */', inlineDynamicImports: true },
-    { file: packageJson.module, format: 'esm', banner: '/* eslint-disable */', inlineDynamicImports: true }
-  ],
-  plugins: [peerDepsExternal(), json(), nodeResolve(), commonjs(), typescript(), del({ targets: ['build/*'] })]
-};
+import commonjs from '@rollup/plugin-commonjs';
+import del from 'rollup-plugin-delete';
+import json from '@rollup/plugin-json';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import packageJson from './package.json';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    { file: packageJson.main, format: 'cjs', banner: '/* eslint-disable */', inlineDynamicImports: true },
+    { file: packageJson.module, format: 'esm', banner: '/* eslint-disable */', inlineDynamicImports: true }
+  ],
+  plugins: [peerDepsExternal(), json(), nodeResolve(), commonjs(), typescript(), del({ targets: ['build/*'] })]
+};

package/src/booking-product/components/date-range-picker/calendar-day.tsx

@@ -1,46 +1,46 @@
-import React from 'react';
-import { getDate, isToday } from 'date-fns';
-import { buildClassName } from '../../../shared/utils/class-util';
-
-interface CalendarDayProps {
-  day: Date;
-  isSelected: boolean;
-  isDisabled: boolean;
-  isOutsideMonth: boolean;
-  extraClassNames?: string[];
-  onClick: (date: Date) => void;
-  onMouseOver: (date: Date) => void;
-  children?: any;
-}
-
-const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], children, onClick, onMouseOver }) => {
-  const handleClick = () => {
-    if (onClick && !isDisabled) {
-      onClick(day);
-    }
-  };
-
-  const handleMouseOver = () => {
-    if (onMouseOver) {
-      onMouseOver(day);
-    }
-  };
-
-  const classNames = buildClassName([
-    'calendar__day',
-    isToday(day) && 'calendar__day--today',
-    isDisabled && 'calendar__day--disabled',
-    isOutsideMonth && 'calendar__day--outside-month',
-    isSelected && 'calendar__day--selected',
-    ...extraClassNames
-  ]);
-
-  return (
-    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver}>
-      {getDate(day).toString().padStart(2, '0')}
-      {children}
-    </div>
-  );
-};
-
-export default CalendarDay;
+import React from 'react';
+import { getDate, isToday } from 'date-fns';
+import { buildClassName } from '../../../shared/utils/class-util';
+
+interface CalendarDayProps {
+  day: Date;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isOutsideMonth: boolean;
+  extraClassNames?: string[];
+  onClick: (date: Date) => void;
+  onMouseOver: (date: Date) => void;
+  children?: any;
+}
+
+const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], children, onClick, onMouseOver }) => {
+  const handleClick = () => {
+    if (onClick && !isDisabled) {
+      onClick(day);
+    }
+  };
+
+  const handleMouseOver = () => {
+    if (onMouseOver) {
+      onMouseOver(day);
+    }
+  };
+
+  const classNames = buildClassName([
+    'calendar__day',
+    isToday(day) && 'calendar__day--today',
+    isDisabled && 'calendar__day--disabled',
+    isOutsideMonth && 'calendar__day--outside-month',
+    isSelected && 'calendar__day--selected',
+    ...extraClassNames
+  ]);
+
+  return (
+    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver}>
+      {getDate(day).toString().padStart(2, '0')}
+      {children}
+    </div>
+  );
+};
+
+export default CalendarDay;

package/src/booking-product/components/date-range-picker/index.tsx

@@ -1,185 +1,185 @@
-import { endOfDay, endOfMonth, getMonth, getYear, isAfter, isEqual, isWithinInterval, Locale, startOfDay } from 'date-fns';
-
-import { isNil } from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
-import Calendar from './calendar';
-import SettingsContext from '../../settings-context';
-
-interface DateRangePickerProps {
-  fromDate?: Date;
-  toDate?: Date;
-  focusMonth?: { month: number; year: number };
-  locale?: Locale;
-  duration?: number;
-  disabledDaysFunction?: (date: Date) => boolean;
-  extraClassNamesFunction?: (date: Date) => string[];
-  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
-  onSelectionChange?: (fromDate: Date, toDate: Date) => void;
-  onFromDateChange?: (date?: Date) => void;
-  onToDateChange?: (date?: Date) => void;
-  onFocusMonthChange?: (focusMonth: { month: number; year: number }) => void;
-  toDateByFromDate?: (fromDate?: Date) => Date | undefined;
-}
-
-const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
-  const [fromDate, setFromDate] = useState<Date | undefined>(props.fromDate);
-  const [toDate, setToDate] = useState<Date | undefined>(props.toDate);
-  const [focusMonth, setFocusMonth] = useState<{ month: number; year: number }>(
-    props.focusMonth ?? {
-      year: getYear(new Date()),
-      month: getMonth(new Date())
-    }
-  );
-  const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
-  const { searchType = 0 } = useContext(SettingsContext);
-
-  const handleDayClick = (day: Date) => {
-    const { onSelectionChange } = props;
-
-    if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
-      if (searchType === 1) {
-        // Only allow selecting the exact toDate
-        const expectedToDate = props.toDateByFromDate?.(fromDate);
-        if (expectedToDate && isEqual(day, expectedToDate)) {
-          setToDate(day);
-          setWaitingForToDate(false);
-
-          props.onToDateChange?.(undefined);
-          onSelectionChange?.(fromDate, day);
-        }
-      } else {
-        // searchType === 0 (original behavior)
-        setToDate(day);
-        setWaitingForToDate(false);
-
-        props.onToDateChange?.(undefined);
-        onSelectionChange?.(fromDate, day);
-      }
-    } else {
-      setFromDate(day);
-
-      if (searchType === 1 && props.toDateByFromDate) {
-        const to = props.toDateByFromDate(day);
-        setToDate(to);
-
-        if (to) {
-          onSelectionChange?.(day, to);
-        }
-      } else if (props.duration) {
-        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
-        setToDate(to);
-        onSelectionChange?.(day, to);
-      } else {
-        setToDate(undefined);
-        setWaitingForToDate(true);
-      }
-
-      props.onFromDateChange?.(day);
-    }
-  };
-
-  const handleDayMouseOver = (day: Date) => {
-    if (isWaitingForToDate && (isNil(fromDate) || isEqual(day, fromDate) || isAfter(day, fromDate))) {
-      setToDate(day);
-    }
-  };
-
-  const handlePreviousClick = () => {
-    const { month, year } = focusMonth;
-
-    const previousMonth = (month - 1) % 12;
-    const previousMonthsYear = previousMonth > month ? year - 1 : year;
-
-    const newFocusMonth = { year: previousMonthsYear, month: previousMonth };
-
-    setFocusMonth(newFocusMonth);
-
-    if (props.onFocusMonthChange) {
-      props.onFocusMonthChange(newFocusMonth);
-    }
-  };
-
-  const handleNextClick = () => {
-    const { month, year } = focusMonth;
-
-    const nextMonth = (month + 1) % 12;
-    const nextMonthsYear = nextMonth < month ? year + 1 : year;
-
-    const newFocusMonth = { year: nextMonthsYear, month: nextMonth };
-
-    setFocusMonth(newFocusMonth);
-
-    if (props.onFocusMonthChange) {
-      props.onFocusMonthChange(newFocusMonth);
-    }
-  };
-
-  const today = startOfDay(new Date());
-
-  const firstCalendarYear = focusMonth.year;
-  const firstCalendarMonth = focusMonth.month;
-
-  const secondCalendarMonth = (firstCalendarMonth + 1) % 12;
-  const secondCalendarYear = secondCalendarMonth < firstCalendarMonth ? firstCalendarYear + 1 : firstCalendarYear;
-
-  const checkIfDateIsSelected = (date: Date) =>
-    isNil(toDate)
-      ? !isNil(fromDate) && isEqual(date, fromDate)
-      : !isNil(fromDate) &&
-        isWithinInterval(date, {
-          start: startOfDay(fromDate),
-          end: endOfDay(toDate)
-        });
-
-  useEffect(() => {
-    setFromDate(props.fromDate);
-    setToDate(props.toDate);
-  }, [props.fromDate?.valueOf(), props.toDate?.valueOf()]);
-
-  useEffect(() => {
-    if (props.fromDate) {
-      setFocusMonth({
-        month: props.fromDate.getMonth(),
-        year: props.fromDate.getFullYear()
-      });
-    }
-  }, [props.fromDate?.valueOf()]);
-
-  return (
-    <div className="date-range-picker">
-      <div className="date-range-picker__from">
-        <Calendar
-          year={firstCalendarYear}
-          month={firstCalendarMonth}
-          onDayClick={handleDayClick}
-          onDayMouseOver={handleDayMouseOver}
-          onPreviousClick={handlePreviousClick}
-          hasPreviousButton={isAfter(new Date(firstCalendarYear, firstCalendarMonth), endOfMonth(today))}
-          hasNextButton={false}
-          selectedDaysFunction={checkIfDateIsSelected}
-          disabledDaysFunction={props.disabledDaysFunction}
-          extraClassNamesFunction={props.extraClassNamesFunction}
-          dayContentFunction={props.dayContentFunction}
-          hasFixedHeight={true}
-        />
-      </div>
-      <div className="date-range-picker__to">
-        <Calendar
-          year={secondCalendarYear}
-          month={secondCalendarMonth}
-          onDayClick={handleDayClick}
-          onDayMouseOver={handleDayMouseOver}
-          onNextClick={handleNextClick}
-          hasPreviousButton={false}
-          selectedDaysFunction={checkIfDateIsSelected}
-          disabledDaysFunction={props.disabledDaysFunction}
-          extraClassNamesFunction={props.extraClassNamesFunction}
-          dayContentFunction={props.dayContentFunction}
-          hasFixedHeight={true}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DateRangePicker;
+import { endOfDay, endOfMonth, getMonth, getYear, isAfter, isEqual, isWithinInterval, Locale, startOfDay } from 'date-fns';
+
+import { isNil } from 'lodash';
+import React, { useContext, useEffect, useState } from 'react';
+import Calendar from './calendar';
+import SettingsContext from '../../settings-context';
+
+interface DateRangePickerProps {
+  fromDate?: Date;
+  toDate?: Date;
+  focusMonth?: { month: number; year: number };
+  locale?: Locale;
+  duration?: number;
+  disabledDaysFunction?: (date: Date) => boolean;
+  extraClassNamesFunction?: (date: Date) => string[];
+  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
+  onSelectionChange?: (fromDate: Date, toDate: Date) => void;
+  onFromDateChange?: (date?: Date) => void;
+  onToDateChange?: (date?: Date) => void;
+  onFocusMonthChange?: (focusMonth: { month: number; year: number }) => void;
+  toDateByFromDate?: (fromDate?: Date) => Date | undefined;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
+  const [fromDate, setFromDate] = useState<Date | undefined>(props.fromDate);
+  const [toDate, setToDate] = useState<Date | undefined>(props.toDate);
+  const [focusMonth, setFocusMonth] = useState<{ month: number; year: number }>(
+    props.focusMonth ?? {
+      year: getYear(new Date()),
+      month: getMonth(new Date())
+    }
+  );
+  const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
+  const { searchType = 0 } = useContext(SettingsContext);
+
+  const handleDayClick = (day: Date) => {
+    const { onSelectionChange } = props;
+
+    if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
+      if (searchType === 1) {
+        // Only allow selecting the exact toDate
+        const expectedToDate = props.toDateByFromDate?.(fromDate);
+        if (expectedToDate && isEqual(day, expectedToDate)) {
+          setToDate(day);
+          setWaitingForToDate(false);
+
+          props.onToDateChange?.(undefined);
+          onSelectionChange?.(fromDate, day);
+        }
+      } else {
+        // searchType === 0 (original behavior)
+        setToDate(day);
+        setWaitingForToDate(false);
+
+        props.onToDateChange?.(undefined);
+        onSelectionChange?.(fromDate, day);
+      }
+    } else {
+      setFromDate(day);
+
+      if (searchType === 1 && props.toDateByFromDate) {
+        const to = props.toDateByFromDate(day);
+        setToDate(to);
+
+        if (to) {
+          onSelectionChange?.(day, to);
+        }
+      } else if (props.duration) {
+        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
+        setToDate(to);
+        onSelectionChange?.(day, to);
+      } else {
+        setToDate(undefined);
+        setWaitingForToDate(true);
+      }
+
+      props.onFromDateChange?.(day);
+    }
+  };
+
+  const handleDayMouseOver = (day: Date) => {
+    if (isWaitingForToDate && (isNil(fromDate) || isEqual(day, fromDate) || isAfter(day, fromDate))) {
+      setToDate(day);
+    }
+  };
+
+  const handlePreviousClick = () => {
+    const { month, year } = focusMonth;
+
+    const previousMonth = (month - 1) % 12;
+    const previousMonthsYear = previousMonth > month ? year - 1 : year;
+
+    const newFocusMonth = { year: previousMonthsYear, month: previousMonth };
+
+    setFocusMonth(newFocusMonth);
+
+    if (props.onFocusMonthChange) {
+      props.onFocusMonthChange(newFocusMonth);
+    }
+  };
+
+  const handleNextClick = () => {
+    const { month, year } = focusMonth;
+
+    const nextMonth = (month + 1) % 12;
+    const nextMonthsYear = nextMonth < month ? year + 1 : year;
+
+    const newFocusMonth = { year: nextMonthsYear, month: nextMonth };
+
+    setFocusMonth(newFocusMonth);
+
+    if (props.onFocusMonthChange) {
+      props.onFocusMonthChange(newFocusMonth);
+    }
+  };
+
+  const today = startOfDay(new Date());
+
+  const firstCalendarYear = focusMonth.year;
+  const firstCalendarMonth = focusMonth.month;
+
+  const secondCalendarMonth = (firstCalendarMonth + 1) % 12;
+  const secondCalendarYear = secondCalendarMonth < firstCalendarMonth ? firstCalendarYear + 1 : firstCalendarYear;
+
+  const checkIfDateIsSelected = (date: Date) =>
+    isNil(toDate)
+      ? !isNil(fromDate) && isEqual(date, fromDate)
+      : !isNil(fromDate) &&
+        isWithinInterval(date, {
+          start: startOfDay(fromDate),
+          end: endOfDay(toDate)
+        });
+
+  useEffect(() => {
+    setFromDate(props.fromDate);
+    setToDate(props.toDate);
+  }, [props.fromDate?.valueOf(), props.toDate?.valueOf()]);
+
+  useEffect(() => {
+    if (props.fromDate) {
+      setFocusMonth({
+        month: props.fromDate.getMonth(),
+        year: props.fromDate.getFullYear()
+      });
+    }
+  }, [props.fromDate?.valueOf()]);
+
+  return (
+    <div className="date-range-picker">
+      <div className="date-range-picker__from">
+        <Calendar
+          year={firstCalendarYear}
+          month={firstCalendarMonth}
+          onDayClick={handleDayClick}
+          onDayMouseOver={handleDayMouseOver}
+          onPreviousClick={handlePreviousClick}
+          hasPreviousButton={isAfter(new Date(firstCalendarYear, firstCalendarMonth), endOfMonth(today))}
+          hasNextButton={false}
+          selectedDaysFunction={checkIfDateIsSelected}
+          disabledDaysFunction={props.disabledDaysFunction}
+          extraClassNamesFunction={props.extraClassNamesFunction}
+          dayContentFunction={props.dayContentFunction}
+          hasFixedHeight={true}
+        />
+      </div>
+      <div className="date-range-picker__to">
+        <Calendar
+          year={secondCalendarYear}
+          month={secondCalendarMonth}
+          onDayClick={handleDayClick}
+          onDayMouseOver={handleDayMouseOver}
+          onNextClick={handleNextClick}
+          hasPreviousButton={false}
+          selectedDaysFunction={checkIfDateIsSelected}
+          disabledDaysFunction={props.disabledDaysFunction}
+          extraClassNamesFunction={props.extraClassNamesFunction}
+          dayContentFunction={props.dayContentFunction}
+          hasFixedHeight={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;