Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

onsenui.d.ts 44KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293
  1. // Type definitions for Onsen UI 2
  2. // Project: https://onsen.io/
  3. // Definitions by: Fran Dios <https://github.com/frandiox/>
  4. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  5. /*~ If this module is a UMD module that exposes a global variable 'ons' when
  6. *~ loaded outside a module loader environment, declare that global here.
  7. *~ Otherwise, delete this declaration.
  8. */
  9. export as namespace ons;
  10. /*~ This declaration specifies that the namespace
  11. *~ is the exported object from the file
  12. */
  13. export = ons;
  14. /**
  15. * @description A global object that's used in Onsen UI. This object can be reached from the AngularJS scope
  16. */
  17. declare namespace ons {
  18. /**
  19. * @return {Boolean} Will be true if Onsen UI is initialized
  20. * @description Returns true if Onsen UI is initialized
  21. */
  22. function isReady(): boolean;
  23. /**
  24. * @return {Boolean} Will be true if the app is running in Cordova
  25. * @description Returns true if running inside Cordova
  26. */
  27. function isWebView(): boolean;
  28. /**
  29. * @description Method used to wait for app initialization. The callback will not be executed until Onsen UI has been completely initialized
  30. * @param {Function} callback Function that executes after Onsen UI has been initialized
  31. */
  32. function ready(callback: Function): void;
  33. /**
  34. * @param {Function} listener Function that executes when device back button is pressed
  35. * @description Set default handler for device back button
  36. */
  37. function setDefaultDeviceBackButtonListener(listener: (eventObject: any) => any): void;
  38. /**
  39. * @description Disable device back button event handler
  40. */
  41. function disableDeviceBackButtonHandler(): void;
  42. /**
  43. * @description Enable device back button event handler
  44. */
  45. function enableDeviceBackButtonHandler(): void;
  46. /**
  47. * @description Enable status bar fill feature on iOS7 and above (except for iPhone X)
  48. */
  49. function enableAutoStatusBarFill(): void;
  50. /**
  51. * @description Disable status bar fill feature on iOS7 and above (except for iPhone X)
  52. */
  53. function disableAutoStatusBarFill(): void;
  54. /**
  55. * @description Creates a static element similar to iOS status bar. Only useful for browser testing
  56. */
  57. function mockStatusBar(): void;
  58. /**
  59. * @description Disable all animations. Could be handy for testing and older devices.
  60. */
  61. function disableAnimations(): void;
  62. /**
  63. * @description Enable animations (default).
  64. */
  65. function enableAnimations(): void;
  66. /**
  67. * @description Disable automatic styling.
  68. */
  69. function disableAutoStyling(): void;
  70. /**
  71. * @description Enable automatic styling based on OS (default).
  72. */
  73. function enableAutoStyling(): void;
  74. /**
  75. * @description Disable adding `fa-` prefix automatically to `ons-icon` classes. Useful when including custom icon packs.
  76. */
  77. function disableIconAutoPrefix(): void;
  78. /**
  79. * @param {Boolean} force Enable or disable the fix.
  80. * @description Applies a fix for iOS UIWebView which prevents scroll events jumping to pages under the top layer. This may visually affect normal scrolling of UIWebView if you open a dialog/menu before the scroll momentum finished. Disabled by default.
  81. */
  82. function forceUIWebViewScrollFix(force: boolean): void;
  83. /**
  84. * @description Refresh styling for the given platform. Only useful for demos. Use `ons.platform.select(...)` for development and production.
  85. */
  86. function forcePlatformStyling(platform: string): void;
  87. /**
  88. * @description Access the last created page from the current `script` scope. Only works inside `<script></script>` tags that are direct children of `ons-page` element. Use this to add lifecycle hooks to a page.
  89. * @return Returns the corresponding page element.
  90. */
  91. function getScriptPage(): HTMLElement | null;
  92. /**
  93. * @description Separated files need to be requested on demand and this can slightly delay pushing new pages. This method requests and caches templates for later use.
  94. * @return Promise that resolves when all the templates are cached.
  95. */
  96. function preload(...args: any[]): Promise<DocumentFragment[]>;
  97. /**
  98. * @description Create a new element from a template. Both inline HTML and external files are supported although the return value differs.
  99. * @return If the provided template was an inline HTML string, it returns the new element. Otherwise, it returns a promise that resolves to the new element.
  100. */
  101. function createElement(...args: any[]): HTMLElement | Promise<HTMLElement>;
  102. /**
  103. * @description Create a popover instance from a template.
  104. * @return Promise object that resolves to the popover component object.
  105. */
  106. function createPopover(page: string, options?: OnsOptions): Promise<HTMLElement>;
  107. /**
  108. * @description Create a dialog instance from a template.
  109. * @return Promise object that resolves to the dialog component object.
  110. */
  111. function createDialog(page: string, options?: OnsOptions): Promise<HTMLElement>;
  112. /**
  113. * @description Create a alert dialog instance from a template.
  114. * @return Promise object that resolves to the alert dialog component object.
  115. */
  116. function createAlertDialog(page: string, options?: OnsOptions): Promise<HTMLElement>;
  117. /**
  118. * @description Shows an instant Action Sheet and lets the user choose an action.
  119. * @return Will resolve when the action sheet is closed. The resolve value is either the index of the tapped button or -1 when canceled.
  120. */
  121. function openActionSheet(...args: any[]): Promise<number>;
  122. /**
  123. * @description If no page is defined for the `ons-loading-placeholder` attribute it will wait for this method being called before loading the page.
  124. */
  125. function resolveLoadingPlaceholder(page: string): void;
  126. /**
  127. * @description Utility methods to create different kinds of alert dialogs. There are three methods available: alert, confirm and prompt
  128. */
  129. namespace notification {
  130. /**
  131. * @param {Object} options Parameter object
  132. * @param {String} [options.message] Alert message
  133. * @param {String} [options.messageHTML] Alert message in HTML
  134. * @param {String} [options.buttonLabel] Label for confirmation button. Default is "OK"
  135. * @param {String} [options.animation] Animation name. Available animations are "none", "fade" and "slide"
  136. * @param {String} [options.title] Dialog title. Default is "Alert"
  137. * @param {String} [options.modifier] Modifier for the dialog
  138. * @param {String} [options.id] The `<ons-alert-dialog>` element's ID.
  139. * @param {Function} [options.callback] Function that executes after dialog has been closed
  140. * @description
  141. * Display an alert dialog to show the user a message
  142. * The content of the message can be either simple text or HTML
  143. * Must specify either message or messageHTML
  144. */
  145. function alert(message: string | AlertOptions, options?: AlertOptions): Promise<HTMLElement>;
  146. /**
  147. * @param {Object} options Parameter object
  148. * @param {String} [options.message] Confirmation question
  149. * @param {String} [options.messageHTML] Dialog content in HTML
  150. * @param {Array} [options.buttonLabels] Labels for the buttons. Default is ["Cancel", "OK"]
  151. * @param {Number} [options.primaryButtonIndex] Index of primary button. Default is 1
  152. * @param {Boolean} [options.cancelable] Whether the dialog is cancelable or not. Default is false
  153. * @param {String} [options.animation] Animation name. Available animations are "none", "fade" and "slide"
  154. * @param {String} [options.title] Dialog title. Default is "Confirm"
  155. * @param {String} [options.modifier] Modifier for the dialog
  156. * @param {String} [options.id] The `<ons-alert-dialog>` element's ID.
  157. * @param {Function} [options.callback]
  158. * Function that executes after the dialog has been closed
  159. * Argument for the function is the index of the button that was pressed or -1 if the dialog was canceled
  160. * @description
  161. * Display a dialog to ask the user for confirmation
  162. * The default button labels are "Cancel" and "OK" but they can be customized
  163. * Must specify either message or messageHTML
  164. */
  165. function confirm(message: string | AlertOptions, options?: AlertOptions): Promise<HTMLElement>;
  166. /**
  167. * @param {Object} options Parameter object
  168. * @param {String} [options.message] Prompt question
  169. * @param {String} [options.messageHTML] Dialog content in HTML
  170. * @param {String} [options.buttonLabel] Label for confirmation button. Default is "OK"
  171. * @param {Number} [options.primaryButtonIndex] Index of primary button. Default is 1
  172. * @param {Boolean} [options.cancelable] Whether the dialog is cancelable or not. Default is false
  173. * @param {String} [options.animation] Animation name. Available animations are "none", "fade" and "slide"
  174. * @param {String} [options.title] Dialog title. Default is "Alert"
  175. * @param {String} [options.modifier] Modifier for the dialog
  176. * @param {String} [options.id] The `<ons-alert-dialog>` element's ID.
  177. * @param {Function} [options.callback]
  178. * Function that executes after the dialog has been closed
  179. * Argument for the function is the value of the input field or null if the dialog was canceled
  180. * @description
  181. * Display a dialog with a prompt to ask the user a question
  182. * Must specify either message or messageHTML
  183. */
  184. function prompt(message: string | AlertOptions, options?: AlertOptions): Promise<HTMLElement>;
  185. function toast(...args: any[]): any;
  186. }
  187. /**
  188. * @description Utility methods for orientation detection
  189. */
  190. namespace orientation {
  191. /**
  192. * @description Add an event listener.
  193. */
  194. function on(eventName: string, listener: Function): void;
  195. /**
  196. * @description Add an event listener that's only triggered once.
  197. */
  198. function once(eventName: string, listener: Function): void;
  199. /**
  200. * @description Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
  201. */
  202. function off(eventName: string, listener?: Function): void;
  203. /**
  204. * @return {Boolean} Will be true if the current orientation is portrait mode
  205. * @description Returns whether the current screen orientation is portrait or not
  206. */
  207. function isPortrait(): boolean;
  208. /**
  209. * @return {Boolean} Will be true if the current orientation is landscape mode
  210. * @description Returns whether the current screen orientation is landscape or not
  211. */
  212. function isLandscape(): boolean;
  213. }
  214. /**
  215. * @description Utility methods to detect current platform
  216. */
  217. namespace platform {
  218. /**
  219. * @param {string} platform Name of the platform. Possible values are: "opera", "firefox", "safari", "chrome", "ie", "android", "blackberry", "ios" or "wp".
  220. * @description Sets the platform used to render the elements. Useful for testing.
  221. */
  222. function select(platform: string): void;
  223. /**
  224. * @description Returns whether app is running in Cordova
  225. * @return {Boolean}
  226. */
  227. function isWebView(): boolean;
  228. /**
  229. * @description Returns whether the OS is iOS
  230. * @return {Boolean}
  231. */
  232. function isIOS(): boolean;
  233. /**
  234. * @description Returns whether the OS is Android
  235. * @return {Boolean}
  236. */
  237. function isAndroid(): boolean;
  238. function isAndroidPhone(): boolean;
  239. function isAndroidTablet(): boolean;
  240. /**
  241. * @description Returns whether app is running in UIWebView.
  242. * @return {Boolean}
  243. */
  244. function isUIWebView(): boolean;
  245. /**
  246. * @description Returns whether app is running in iOS Safari.
  247. * @return {Boolean}
  248. */
  249. function isIOSSafari(): boolean;
  250. /**
  251. * @description Returns whether app is running in WKWebView.
  252. * @return {Boolean}
  253. */
  254. function isWKWebView(): boolean;
  255. /**
  256. * @description Returns whether the device is iPhone
  257. * @return {Boolean}
  258. */
  259. function isIPhone(): boolean;
  260. /**
  261. * @description Returns whether the device is iPhone X
  262. * @return {Boolean}
  263. */
  264. function isIPhoneX(): boolean;
  265. /**
  266. * @description Returns whether the device is iPad
  267. * @return {Boolean}
  268. */
  269. function isIPad(): boolean;
  270. /**
  271. * @description Returns whether the device is BlackBerry
  272. * @return {Boolean}
  273. */
  274. function isBlackBerry(): boolean;
  275. /**
  276. * @description Returns whether the browser is Opera
  277. * @return {Boolean}
  278. */
  279. function isOpera(): boolean;
  280. /**
  281. * @description Returns whether the browser is Firefox
  282. * @return {Boolean}
  283. */
  284. function isFirefox(): boolean;
  285. /**
  286. * @description Returns whether the browser is Safari
  287. * @return {Boolean}
  288. */
  289. function isSafari(): boolean;
  290. /**
  291. * @description Returns whether the browser is Chrome
  292. * @return {Boolean}
  293. */
  294. function isChrome(): boolean;
  295. /**
  296. * @description Returns whether the browser is Internet Explorer
  297. * @return {Boolean}
  298. */
  299. function isIE(): boolean;
  300. /**
  301. * @description Returns whether the iOS version is 7 or above
  302. * @return {Boolean}
  303. */
  304. function isIOS7above(): boolean;
  305. /**
  306. *
  307. */
  308. function isEdge(): boolean;
  309. /**
  310. * @description Returns whether device is Windows phone
  311. * @return {Boolean}
  312. */
  313. function isWP(): boolean;
  314. }
  315. /**
  316. * @description Utility methods for modifier attributes
  317. */
  318. namespace modifier {
  319. /**
  320. * @description Add the specified modifiers to the element if they are not already included.
  321. * @param {HTMLElemenet} element Target element.
  322. * @param {String} modifier Name of the modifier.
  323. */
  324. function add(element: HTMLElement, ...modifier: string[]): void;
  325. /**
  326. * @description Remove the specified modifiers from the element if they are included.
  327. * @param {HTMLElemenet} element Target element.
  328. * @param {String} modifier Name of the modifier.
  329. */
  330. function remove(element: HTMLElement, ...modifier: string[]): void;
  331. /**
  332. * @description Check whether the specified modifier is included in the element.
  333. * @param {HTMLElemenet} element Target element.
  334. * @param {String} modifier Name of the modifier.
  335. * @return {Boolean} 'true' when the specified modifier is found in the element's 'modifier' attribute. 'false' otherwise.
  336. */
  337. function contains(element: HTMLElement, modifier: string): boolean;
  338. /**
  339. * @description Toggle the specified modifier.
  340. * @param {HTMLElemenet} element Target element.
  341. * @param {String} modifier Name of the modifier.
  342. * @param {Boolean} force If it evaluates to true, add specified modifier value, and if it evaluates to false, remove it.
  343. */
  344. function toggle(element: HTMLElement, modifier: string, force?: boolean): void;
  345. }
  346. /**
  347. * @description Default page loader that load page template
  348. */
  349. var defaultPageLoader: PageLoader;
  350. /**
  351. * @description PageLoader class constructor
  352. */
  353. class PageLoader {
  354. constructor(...args: any[]);
  355. internalLoader: Function;
  356. load(options: {page: any, parent: Element, params?: Object}, done: Function): void;
  357. }
  358. var GestureDetector: any;
  359. interface OnsActionSheetElement extends HTMLElement {
  360. show(...args: any[]): any;
  361. hide(...args: any[]): any;
  362. onDeviceBackButton: any;
  363. visible: any;
  364. disabled: any;
  365. cancelable: any;
  366. }
  367. interface OnsSelectElement extends HTMLElement {
  368. length: any;
  369. options: any;
  370. selectedIndex: any;
  371. value: any;
  372. }
  373. interface OnsSegmentElement extends HTMLElement {
  374. /**
  375. * @param {Number} index Button index
  376. * @param {Object} [options] Parameter object passed to the tabbar, if any.
  377. * @return Resolves to the selected index or to the new page element if there is a connected tabbar.
  378. * @description Make button with the specified index active. If there is a connected tabbar it shows the corresponding tab page. In this case animations and other options can be specified by the second parameter.
  379. */
  380. setActiveButton(index: number, options?: TabbarOptions): Promise<HTMLElement>;
  381. /**
  382. * @return {Number} The index of the currently active button
  383. * @description Returns button index of current active button. If active button is not found, returns -1
  384. */
  385. getActiveButtonIndex(): number;
  386. /**
  387. * @description Whether the element is disabled or not.
  388. */
  389. disabled: boolean;
  390. }
  391. interface OnsTemplateElement extends HTMLElement {
  392. template: any;
  393. }
  394. interface OnsToastElement extends HTMLElement {
  395. show(...args: any[]): any;
  396. toggle(...args: any[]): any;
  397. hide(...args: any[]): any;
  398. onDeviceBackButton: any;
  399. visible: any;
  400. }
  401. interface OnsToolbarElement extends HTMLElement {
  402. /**
  403. * @description Show or hide the toolbar element
  404. */
  405. setVisibility(visible: boolean): void;
  406. /**
  407. * @description Show the toolbar element
  408. */
  409. show(): void;
  410. /**
  411. * @description Hide the toolbar element
  412. */
  413. hide(): void;
  414. }
  415. interface OnsToolbarButtonElement extends HTMLElement {
  416. disabled: any;
  417. }
  418. /**
  419. * @description Should be used as root component of each page. The content inside page component is scrollable
  420. */
  421. interface OnsPageElement extends HTMLElement {
  422. /**
  423. * @description Function to be executed when scrolling to the bottom of the page. The function receives a done callback as an argument that must be called when it's finished.
  424. */
  425. onInfiniteScroll: Function;
  426. /**
  427. * @description Back-button handler.
  428. */
  429. backButtonHandler: any;
  430. onDeviceBackButton: any;
  431. /**
  432. * @description User's custom data passed to `pushPage()`-like methods.
  433. */
  434. data: any;
  435. }
  436. /**
  437. * @description Carousel component
  438. */
  439. interface OnsCarouselElement extends HTMLElement {
  440. /**
  441. * @description Specify the index of the `<ons-carousel-item>` to show.
  442. * @return Resolves to the carousel element.
  443. */
  444. setActiveIndex(index: number, options?: CarouselOptions): Promise<HTMLElement>;
  445. /**
  446. * @description Returns the index of the currently visible `<ons-carousel-item>`.
  447. * @return The current carousel item index.
  448. */
  449. getActiveIndex(): void;
  450. /**
  451. * @description Show next ons-carousel item
  452. * @return Resolves to the carousel element
  453. */
  454. next(options?: CarouselOptions): Promise<HTMLElement>;
  455. /**
  456. * @description Show previous ons-carousel item
  457. * @return Resolves to the carousel element
  458. */
  459. prev(options?: CarouselOptions): Promise<HTMLElement>;
  460. /**
  461. * @description Update the layout of the carousel. Used when adding ons-carousel-items dynamically or to automatically adjust the size.
  462. */
  463. refresh(): void;
  464. /**
  465. * @description Show first ons-carousel item
  466. * @Resolves to the carousel element
  467. */
  468. first(): Promise<HTMLElement>;
  469. /**
  470. * @description Show last ons-carousel item
  471. * @return Resolves to the carousel element
  472. */
  473. last(): Promise<HTMLElement>;
  474. /**
  475. * @description The number of carousel items.
  476. **/
  477. itemCount: number;
  478. /**
  479. * @description The current auto scroll ratio.
  480. **/
  481. autoScrollRatio: number;
  482. /**
  483. * @description true if the carousel is swipeable.
  484. **/
  485. swipeable: boolean;
  486. /**
  487. * @param {Number} index Decimal index of the current swipe.
  488. * @param {Object} animationOptions Object containing duration and timing.
  489. * @description Hook called whenever the user slides the carousel.
  490. **/
  491. onSwipe?: Function;
  492. /**
  493. * @description true if auto scroll is enabled.
  494. **/
  495. autoScroll: boolean;
  496. /**
  497. * @description Whether the carousel is disabled or not.
  498. **/
  499. disabled: boolean;
  500. /**
  501. * @description Whether the carousel is overscrollable or not.
  502. **/
  503. overscrollable: boolean;
  504. /**
  505. * @description Whether the carousel is centered or not.
  506. **/
  507. centered: boolean;
  508. }
  509. /**
  510. * @description Component that adds "pull-to-refresh" to an <ons-page> element
  511. */
  512. //later should be updated
  513. interface OnsPullHookElement extends HTMLElement {
  514. /**
  515. * @description The height of the pull hook in pixels. The default value is `64px`.
  516. */
  517. height: string;
  518. /**
  519. * @param {Number} thresholdHeight Desired threshold height
  520. * @description The thresholdHeight of the pull hook in pixels. The default value is `96px`.
  521. */
  522. thresholdHeight: string;
  523. /**
  524. * @description The current number of pixels the pull hook has moved.
  525. */
  526. state: string;
  527. /**
  528. * @description The current number of pixels the pull hook has moved.
  529. */
  530. pullDistance: number;
  531. /**
  532. * @description A boolean value that specifies whether the element is disabled or not.
  533. */
  534. disabled: boolean;
  535. /**
  536. * @param {Number} ratio Pulled ratio (scroll / height).
  537. * @param {Object} animationOptions Object containing duration and timing.
  538. * @description Hook called whenever the user pulls the element.
  539. **/
  540. onPull?: Function;
  541. /**
  542. * @description Define the function that will be called in the `"action"` state.
  543. */
  544. onAction?: Function;
  545. }
  546. /**
  547. * @modifier android Display an Android style alert dialog
  548. * @description Alert dialog that is displayed on top of the current screen
  549. */
  550. interface OnsAlertDialogElement extends HTMLElement {
  551. /**
  552. * @param {Object} [options] Parameter object
  553. * @param {String} [options.animation] Animation name. Available animations are "fade", "slide" and "none"
  554. * @param {Function} [options.callback] Function to execute after the dialog has been revealed
  555. * @description Show the alert dialog
  556. */
  557. show(options?: DialogOptions): Promise<HTMLElement>;
  558. /**
  559. * @param {Object} [options] Parameter object
  560. * @param {String} [options.animation] Animation name. Available animations are "fade", "slide" and "none"
  561. * @param {Function} [options.callback] Function to execute after the dialog has been hidden
  562. * @description Hide the alert dialog
  563. */
  564. hide(options?: DialogOptions): Promise<HTMLElement>;
  565. /**
  566. * @description A boolean value that specifies whether the dialog is disabled or not.
  567. */
  568. disabled: boolean;
  569. /**
  570. * @description A boolean value that specifies whether the dialog is cancelable or not. When the dialog is cancelable it can be closed by tapping the background or by pressing the back button on Android devices.
  571. */
  572. cancelable: boolean;
  573. visible: any;
  574. onDeviceBackButton: any;
  575. }
  576. /**
  577. * @description Dialog that is displayed on top of current screen
  578. */
  579. interface OnsDialogElement extends HTMLElement {
  580. /**
  581. * @return {Object} Device back button handler
  582. * @description Retrieve the back button handler for overriding the default behavior
  583. */
  584. onDeviceBackButton(): any;
  585. /**
  586. * @param {Object} [options] Parameter object
  587. * @param {String} [options.animation] Animation name. Available animations are "none", "fade" and "slide"
  588. * @param {Function} [options.callback] This function is called after the dialog has been revealed
  589. * @description Show the dialog
  590. */
  591. show(options?: DialogOptions): Promise<HTMLElement>;
  592. /**
  593. * @param {Object} [options] Parameter object
  594. * @param {String} [options.animation] Animation name. Available animations are "none", "fade" and "slide"
  595. * @param {Function} [options.callback] This functions is called after the dialog has been hidden
  596. * @description Hide the dialog
  597. */
  598. hide(options?: DialogOptions): Promise<HTMLElement>;
  599. /**
  600. * @description Destroy the dialog and remove it from the DOM tree
  601. */
  602. destroy(): void;
  603. visible: any;
  604. /**
  605. * @description A boolean value that specifies whether the dialog is disabled or not.
  606. */
  607. disabled: boolean;
  608. /**
  609. * @description A boolean value that specifies whether the dialog is cancelable or not. When the dialog is cancelable it can be closed by tapping the background or by pressing the back button on Android devices.
  610. */
  611. cancelable: boolean;
  612. }
  613. /**
  614. * @description Switch component
  615. */
  616. interface OnsSwitchElement extends HTMLElement {
  617. /**
  618. * @description If true the switch will be set to on.
  619. */
  620. checked: boolean;
  621. /**
  622. * @description Whether the element is disabled or not.
  623. */
  624. disabled: boolean;
  625. /**
  626. * @description The underlying checkbox element.
  627. */
  628. checkbox: HTMLElement;
  629. value: any;
  630. }
  631. /**
  632. * @description
  633. * Modal component that masks current screen
  634. * Underlying components are not subject to any events while the modal component is shown
  635. */
  636. interface OnsModalElement extends HTMLElement {
  637. /**
  638. * @return Device back button handler
  639. * @param {String} [options.animation] Animation name. Available animations are `"none"` and `"fade"`.
  640. * @param {String} [options.animationOptions] Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  641. * @description Toggle modal visibility
  642. */
  643. toggle(options?: ModalOptions): Promise<HTMLElement>;
  644. /**
  645. * @param {Object} [options] Parameter object
  646. * @param {String} [options.animation] Animation name. Available animations are `"none"` and `"fade"`.
  647. * @param {String} [options.animationOptions] Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  648. * @description Show modal
  649. */
  650. show(options?: ModalOptions): Promise<HTMLElement>;
  651. /**
  652. * @return Resolves to the hidden element
  653. * @param {String} [options.animation] Animation name. Available animations are `"none"` and `"fade"`.
  654. * @param {String} [options.animationOptions] Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  655. * @description Hide modal
  656. */
  657. hide(options?: ModalOptions): Promise<HTMLElement>;
  658. /**
  659. * @description Back-button handler.
  660. */
  661. onDeviceBackButton: any;
  662. /**
  663. * @description Whether the dialog is visible or not.
  664. */
  665. visible: boolean;
  666. }
  667. /**
  668. * @description A component that provides page stack management and navigation. This component does not have a visible content
  669. */
  670. interface OnsNavigatorElement extends HTMLElement {
  671. /**
  672. * @param {Object} [options] Parameter object
  673. * @param {Function} [options.callback] Function that is called when the transition has ended
  674. * @description Pops the current page from the page stack. The previous page will be displayed
  675. */
  676. popPage(options?: NavigatorOptions): Promise<HTMLElement>;
  677. /**
  678. * @param {*} page Page URL. Can be either a HTML document or a <code>&lt;ons-template&gt;</code>
  679. * @param {Object} [options] Parameter object
  680. * @param {String} [options.animation] Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none"
  681. * @param {Function} [options.callback] Function that is called when the transition has ended
  682. * @return Promise which resolves to the pushed page.
  683. * @description Pushes the specified pageUrl into the page stack.
  684. */
  685. pushPage(page: any, options?: PushPageOptions): Promise<HTMLElement>;
  686. /**
  687. * @return Promise which resolves to the inserted page
  688. * @description Replaces the current page with the specified one. Extends pushPage parameters.
  689. */
  690. replacePage(page: any, options?: PushPageOptions): Promise<HTMLElement>;
  691. /**
  692. * @param {Number} index The index where it should be inserted
  693. * @param {*} page Page URL. Can be either a HTML document or a <code>&lt;ons-template&gt;</code>
  694. * @param {Object} [options] Parameter object
  695. * @param {String} [options.animation] Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none"
  696. * @description Insert the specified page into the page stack with specified index
  697. */
  698. insertPage(index: number, page: any, options?: NavigatorOptions): Promise<HTMLElement>;
  699. removePage(...args: any[]): any;
  700. /**
  701. * @param {*} page Page URL. Can be either a HTML document or an <code>&lt;ons-template&gt;</code>
  702. * @param {Object} [options] Parameter object
  703. * @param {String} [options.animation] Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none"
  704. * @param {Function} [options.callback] Function that is called when the transition has ended
  705. * @description Clears page stack and adds the specified pageUrl to the page stack
  706. */
  707. resetToPage(page: any, options?: NavigatorOptions): Promise<HTMLElement>;
  708. /**
  709. * @param {any} item
  710. * @param {Object} [options]
  711. * @description Page URL or index of an existing page in navigator's stack.
  712. */
  713. bringPageTop(item: any, options?: Object): Promise<HTMLElement>;
  714. pageLoader: any;
  715. page: any;
  716. onDeviceBackButton: any;
  717. /**
  718. * @return {HTMLElement}
  719. * @description Current top page element. Use this method to access options passed by `pushPage()`-like methods.
  720. */
  721. topPage: HTMLElement; //attribute length in future?
  722. /**
  723. * @description Navigator's page stack.
  724. */
  725. pages: any;
  726. /**
  727. * @description Default options object. Attributes have priority over this property.
  728. */
  729. options: NavigatorOptions;
  730. /**
  731. * @param {Number} index Decimal ratio of the current swipe.
  732. * @param {Object} animationOptions Object containing duration and timing.
  733. * @description Hook called whenever the user slides the navigator.
  734. **/
  735. onSwipe?: Function;
  736. }
  737. /**
  738. * @description A component to display a tab bar on the bottom of a page. Used with ons-tab to manage pages using tabs
  739. */
  740. interface OnsTabbarElement extends HTMLElement {
  741. /**
  742. * @param {*} url Page URL. Can be either an HTML document or an <code>&lt;ons-template&gt;</code>
  743. * @return Resolves to the new page element.
  744. * @description Displays a new page without changing the active index
  745. */
  746. loadPage(page: any, options?: TabbarOptions): Promise<HTMLElement>;
  747. /**
  748. * @param {Number} index Tab index
  749. * @param {Object} [options] Parameter object
  750. * @param {Boolean} [options.keepPage] If true the page will not be changed
  751. * @param {String} [options.animation] Animation name. Available animations are `"fade"`, `"slide"` and `"none"`.
  752. * @return Resolves to the new page element.
  753. * @description Show specified tab page. Animations and other options can be specified by the second parameter
  754. */
  755. setActiveTab(index: number, options?: TabbarOptions): Promise<HTMLElement>;
  756. /**
  757. * @description Used to hide or show the tab bar.
  758. */
  759. setTabbarVisibility(visible: boolean): void;
  760. /**
  761. * @return {Number} The index of the currently active tab
  762. * @description Returns tab index on current active tab. If active tab is not found, returns -1
  763. */
  764. getActiveTabIndex(): number;
  765. visible: any;
  766. /**
  767. * @description true if the tabbar is swipeable.
  768. **/
  769. swipeable: boolean;
  770. /**
  771. * @param {Number} index Decimal index of the current swipe.
  772. * @param {Object} animationOptions Object containing duration and timing.
  773. * @description Hook called whenever the user slides the tabbar.
  774. **/
  775. onSwipe?: Function;
  776. }
  777. /**
  778. * @modifier android Display an Android style popover
  779. * @description A component that displays a popover next to an element
  780. */
  781. interface OnsPopoverElement extends HTMLElement {
  782. /**
  783. * @param {String|Event|HTMLElement} target Target element. Can be either a CSS selector, an event object or a DOM element
  784. * @param {Object} [options] Parameter object
  785. * @param {String} [options.animation] Animation name. Available animations are "fade" and "none"
  786. * @return Resolves to the displayed element
  787. * @description Open the popover and point it at a target. The target can be either an event, a css selector or a DOM element
  788. */
  789. show(target: any, options?: PopoverOptions): Promise<HTMLElement>;
  790. /**
  791. * @param {Object} [options] Parameter object
  792. * @param {String} [options.animation] Animation name. Available animations are "fade" and "none"
  793. * @return Resolves to the hidden element
  794. * @description Close the popover
  795. */
  796. hide(options?: PopoverOptions): Promise<HTMLElement>;
  797. /**
  798. * @description Whether the dialog is visible or not.
  799. */
  800. visible: boolean;
  801. /**
  802. * @description A boolean value that specifies whether the popover is cancelable or not. When the popover is cancelable it can be closed by tapping the background or by pressing the back button on Android devices.
  803. */
  804. cancelable: boolean;
  805. /**
  806. * @description Retrieve the back- button handler.
  807. */
  808. onDeviceBackButton: any;
  809. }
  810. interface OnsSplitterSideElement extends HTMLElement {
  811. /**
  812. * @description Page element loaded in the splitter side.
  813. */
  814. page: string;
  815. pageLoader: any;
  816. /**
  817. * @description Current mode. Possible values are "split", "collapse", "closed", "open" or "changing".
  818. */
  819. mode: string;
  820. /**
  821. * @description Returns whether the popover is visible or not.
  822. * @return {Boolean} This value is `true` when the menu is open.
  823. */
  824. isOpen: boolean;
  825. /**
  826. * @description Open menu in collapse mode.
  827. * @return Resolves to the splitter side element or false if not in collapse mode
  828. */
  829. open(options?: SplitterSideOptions): Promise<HTMLElement | boolean>;
  830. /**
  831. * @description Close menu in collapse mode.
  832. * @param {Object} [option]
  833. * @return Resolves to the splitter side element or false if not in collapse mode
  834. */
  835. close(options?: SplitterSideOptions): Promise<HTMLElement | boolean>;
  836. /**
  837. * @description Opens if it's closed. Closes if it's open.
  838. * @param {Object} [options]
  839. * @return Resolves to the splitter side element or false if not in collapse mode
  840. */
  841. toggle(options?: SplitterSideOptions): Promise<HTMLElement | boolean>;
  842. /**
  843. * @description Show the page specified in pageUrl in the right section
  844. * @param {*} page Page URL. Can be either an HTML document or an <ons-template>.
  845. * @param {Object} [option]
  846. * @return Resolves to the new page element
  847. */
  848. load(page: any, options?: SplitterSideOptions): Promise<HTMLElement>;
  849. /**
  850. * @param {Number} index Decimal ratio of the current swipe.
  851. * @param {Object} animationOptions Object containing duration and timing.
  852. * @description Hook called whenever the user slides the splitter.
  853. **/
  854. onSwipe?: Function;
  855. }
  856. interface OnsLazyRepeatElement extends HTMLElement {
  857. /**
  858. * @description Refresh the list. Use this method when the data has changed.
  859. */
  860. refresh(): void;
  861. /**
  862. * @Specify a delegate object to load and unload item elements.
  863. */
  864. delegate: LazyRepeatOptions;
  865. }
  866. interface OnsButtonElement extends HTMLElement {
  867. /**
  868. * @description A boolean value that specifies if the button is disabled or not.
  869. */
  870. disabled: boolean;
  871. }
  872. interface OnsAlertDialogButtonElement extends HTMLElement {
  873. /**
  874. * @description A boolean value that specifies if the button is disabled or not.
  875. */
  876. disabled: boolean;
  877. }
  878. interface OnsFabElement extends HTMLElement {
  879. /**
  880. * @description Show the floating action button.
  881. */
  882. show(): void;
  883. /**
  884. * @description Hide the floating action button.
  885. */
  886. hide(): void;
  887. /**
  888. * @description Toggle the visibility of the button.
  889. */
  890. toggle(): void;
  891. /**
  892. * @description A boolean value that specifies if the button is disabled or not.
  893. */
  894. disabled: boolean;
  895. /**
  896. * @description Weher the dialog is visible or not.
  897. */
  898. visible: boolean;
  899. }
  900. interface OnsInputElement extends HTMLElement {
  901. /**
  902. * @description The current value of the input.
  903. */
  904. value: string;
  905. /**
  906. * @description This boolean specifies whether the input is checked or not. Only works for `radio` and `checkbox` type inputs.
  907. */
  908. checked: boolean;
  909. /**
  910. * @description A boolean value that specifies whether the input is disabled or not.
  911. */
  912. disabled: boolean;
  913. }
  914. interface OnsSearchInputElement extends HTMLElement {
  915. /**
  916. * @description The current value of the search input.
  917. */
  918. value: string;
  919. /**
  920. * @description A boolean value that specifies whether the search input is disabled or not.
  921. */
  922. disabled: boolean;
  923. }
  924. interface OnsCheckboxElement extends HTMLElement {
  925. /**
  926. * @description The value of the checkbox.
  927. */
  928. value: string;
  929. /**
  930. * @description This boolean specifies whether the checkbox is checked or not.
  931. */
  932. checked: boolean;
  933. /**
  934. * @description A boolean value that specifies whether the checkbox is disabled or not.
  935. */
  936. disabled: boolean;
  937. }
  938. interface OnsRadioElement extends HTMLElement {
  939. /**
  940. * @description The value of the radio button.
  941. */
  942. value: string;
  943. /**
  944. * @description This boolean specifies whether the radio button is selected or not.
  945. */
  946. checked: boolean;
  947. /**
  948. * @description A boolean value that specifies whether the radio button is disabled or not.
  949. */
  950. disabled: boolean;
  951. }
  952. interface OnsRangeElement extends HTMLElement {
  953. /**
  954. * @description A boolean value that specifies whether the input is disabled or not.
  955. */
  956. disabled: boolean;
  957. /**
  958. * @description The current value of the input.
  959. */
  960. value: string;
  961. }
  962. interface OnsRippleElement extends HTMLElement {
  963. /**
  964. * @description A boolean value that specifies whether the input is disabled or not.
  965. */
  966. disabled: boolean;
  967. }
  968. interface OnsSplitterContentElement extends HTMLElement {
  969. /**
  970. * @description Page element loaded in the splitter content.
  971. */
  972. page: string;
  973. pageLoader: any;
  974. /**
  975. * @description Show the page specified in pageUrl in the right section. Returns: Resolves to the new page element
  976. * @param {*} page
  977. * @param {Object} [options]
  978. * @return {Promise}
  979. */
  980. load(page: any, options?: SplitterContentOptions): Promise<HTMLElement>;
  981. }
  982. interface OnsSplitterElement extends HTMLElement {
  983. /**
  984. * @description Left `<ons-splitter-side>` element.
  985. */
  986. left: HTMLElement;
  987. /**
  988. * @description Right `<ons-splitter-side>` element.
  989. */
  990. right: HTMLElement;
  991. side: any;
  992. /**
  993. * @description The `<ons-splitter-content>` element.
  994. */
  995. content: HTMLElement;
  996. /**
  997. * @description Retrieve the back button handler.
  998. */
  999. onDeviceBackButton: Function;
  1000. }
  1001. interface OnsBackButtonElement extends HTMLElement {
  1002. /**
  1003. * @Options Options object.
  1004. */
  1005. options?: BackButtonOptions;
  1006. onClick: any;
  1007. }
  1008. interface OnsProgressBarElement extends HTMLElement {
  1009. /**
  1010. * @description Current progress. Should be a value between 0 and 100.
  1011. */
  1012. value: number;
  1013. /**
  1014. * @description Current secondary progress. Should be a value between 0 and 100.
  1015. */
  1016. secondaryValue: number;
  1017. /**
  1018. * @description If this property is `true`, an infinite looping animation will be shown.
  1019. */
  1020. indeterminate: boolean;
  1021. }
  1022. interface OnsProgressCircularElement extends HTMLElement {
  1023. /**
  1024. * @description Current progress. Should be a value between 0 and 100.
  1025. */
  1026. value: number;
  1027. /**
  1028. * @description Current secondary progress. Should be a value between 0 and 100.
  1029. */
  1030. secondaryValue: number;
  1031. /**
  1032. * @description If this property is `true`, an infinite looping animation will be shown.
  1033. */
  1034. indeterminate: boolean;
  1035. }
  1036. interface OnsSpeedDialElement extends HTMLElement {
  1037. /**
  1038. * @description Show the speed dial.
  1039. */
  1040. show(): void;
  1041. /**
  1042. * @description Hide the speed dial.
  1043. */
  1044. hide(): void;
  1045. /**
  1046. * @description Show the speed dial items.
  1047. */
  1048. showItems(): void;
  1049. /**
  1050. * @description Hide the speed dial items.
  1051. */
  1052. hideItems(): void;
  1053. isOpen(): any;
  1054. /**
  1055. * @description Toggle visibility.
  1056. */
  1057. toggle(): void;
  1058. /**
  1059. * @description Toggle item visibility.
  1060. */
  1061. toggleItems(): void;
  1062. /**
  1063. * @description Whether the element is disabled or not.
  1064. */
  1065. disabled: boolean;
  1066. /**
  1067. * @description Whether the element is inline or not.
  1068. */
  1069. inline: boolean;
  1070. /**
  1071. * @description Whether the element is visible or not.
  1072. */
  1073. visible: boolean;
  1074. }
  1075. interface OnsListItemElement extends HTMLElement {
  1076. /**
  1077. * @description Show the expandable content if element is expandable
  1078. */
  1079. showExpansion(): void;
  1080. /**
  1081. * @description Hide the expandable content if element is expandable
  1082. */
  1083. hideExpansion(): void;
  1084. }
  1085. }
  1086. interface OnsOptions {
  1087. parentScope?: Object;
  1088. }
  1089. interface AlertOptions {
  1090. message?: string;
  1091. messageHTML?: string;
  1092. buttonLabel?: string;
  1093. buttonLabels?: string[];
  1094. primaryButtonIndex?: number;
  1095. cancelable?: boolean;
  1096. animation?: string;
  1097. title?: string;
  1098. modifier?: string;
  1099. callback?: any;
  1100. id?: string;
  1101. }
  1102. interface CarouselOptions{
  1103. callback?: Function;
  1104. animation?: String;
  1105. animationOptions?: Object;
  1106. }
  1107. interface DialogOptions {
  1108. animation?: string;
  1109. callback?: Function;
  1110. }
  1111. interface ModalOptions {
  1112. /**
  1113. * @description Animation name. Available animations are `"none"` and `"fade"`.
  1114. */
  1115. animation?: string;
  1116. /**
  1117. * @description Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  1118. */
  1119. animationOptions?: string;
  1120. }
  1121. interface NavigatorOptions {
  1122. /**
  1123. * @description Animation name. Available animations are `"slide"`, `"lift"`, `"fade"` and `"none"`. These are platform based animations. For fixed animations, add `"-ios"` or `"-md"` suffix to the animation name. E.g. `"lift-ios"`, `"lift-md"`. Defaults values are `"slide-ios"` and `"fade-md"`.
  1124. */
  1125. animation?: string;
  1126. /**
  1127. * @description Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  1128. */
  1129. animationOptions?: string;
  1130. /**
  1131. * @description Function that is called when the transition has ended.
  1132. */
  1133. callback?: Function;
  1134. }
  1135. interface PushPageOptions {
  1136. page?: any,
  1137. pageHTML?: string,
  1138. animation?: string,
  1139. animationOptions?: Object,
  1140. callback?: Function,
  1141. data?: Object
  1142. }
  1143. interface TabbarOptions {
  1144. /**
  1145. * @description If true the page will not be changed.
  1146. */
  1147. keepPage?: boolean;
  1148. /**
  1149. * @description Animation name. Available animations are `"fade"`, `"slide"` and `"none"`.
  1150. */
  1151. animation?: string;
  1152. /**
  1153. * @description Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  1154. */
  1155. animationOptions?: string;
  1156. /**
  1157. *
  1158. */
  1159. callback?: Function;
  1160. }
  1161. interface PopoverOptions {
  1162. animation?: string;
  1163. }
  1164. interface SplitterSideOptions {
  1165. /**
  1166. * @description This function will be called after the menu has been opened.
  1167. * @return {Function}
  1168. */
  1169. callback?: Function;
  1170. }
  1171. interface LazyRepeatOptions {
  1172. /**
  1173. * @description This function should return a `HTMLElement`. To help rendering the element, the current index and a template is supplied as arguments. The template is the initial content of the `<ons-lazy-repeat>` element.
  1174. */
  1175. createItemContent?: HTMLElement;
  1176. /**
  1177. * @description Should return the number of items in the list.
  1178. */
  1179. countItems?: number;
  1180. /**
  1181. * @description Should return the height of an item. The index is provided as an argument. This is important when rendering lists where the items have different height. The function is optional and if it isn't present the height of the first item will be automatically calculated and used for all other items.
  1182. */
  1183. calculateItemHeight?: number;
  1184. /**
  1185. * @description This function is used called when an item is removed from the DOM. The index and DOM element is provided as arguments. The function is optional but may be important in order to avoid memory leaks.
  1186. */
  1187. destroyItem?: string;
  1188. /**
  1189. * @description Function which recieves an index and the scope for the item. Can be used to configure values in the item scope.
  1190. */
  1191. configureItemScope?: number;
  1192. }
  1193. interface SplitterContentOptions {
  1194. /**
  1195. * @description This function will be called after the menu has been opened.
  1196. * @return {Function}
  1197. */
  1198. callback?: Function;
  1199. }
  1200. interface BackButtonOptions {
  1201. /**
  1202. * @description Animation name. Available animations are "slide", "lift", "fade" and "none". These are platform based animations. For fixed animations, add "-ios" or "-md" suffix to the animation name. E.g. "lift-ios", "lift-md". Defaults values are "slide-ios" and "fade-md".
  1203. */
  1204. animation?: string;
  1205. /**
  1206. * @description Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.
  1207. */
  1208. animationOptions?: string;
  1209. /**
  1210. * @description Function that is called when the transition has ended.
  1211. */
  1212. callback?: Function;
  1213. }