pwa-action-sheet.cjs.entry.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. const index = require('./index-d7f36e37.js');
  4. const actionSheetCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Roboto\", sans-serif}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0);-webkit-transition:400ms background-color cubic-bezier(.36,.66,.04,1);transition:400ms background-color cubic-bezier(.36,.66,.04,1)}.wrapper.open{background-color:rgba(0, 0, 0, 0.32)}.title{color:#999;height:23px;line-height:23px;padding-bottom:17px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:20px}.content{width:568px;-ms-flex-item-align:end;align-self:flex-end;background-color:#fff;-webkit-transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1), 400ms -webkit-transform cubic-bezier(.36,.66,.04,1);-webkit-transform:translateY(100%);transform:translateY(100%)}.wrapper.open .content{-webkit-transform:translateY(0%);transform:translateY(0%)}@media only screen and (max-width: 568px){.content{width:100%}}.action-sheet-option{cursor:pointer;height:52px;line-height:52px}.action-sheet-button{color:rgb(38, 38, 38);font-size:16px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:0px}.action-sheet-button:hover{background-color:#F6F6F6}";
  5. const PWAActionSheet = class {
  6. constructor(hostRef) {
  7. index.registerInstance(this, hostRef);
  8. this.onSelection = index.createEvent(this, "onSelection", 7);
  9. this.header = undefined;
  10. this.cancelable = true;
  11. this.options = [];
  12. this.open = false;
  13. }
  14. componentDidLoad() {
  15. requestAnimationFrame(() => {
  16. this.open = true;
  17. });
  18. }
  19. dismiss() {
  20. if (this.cancelable) {
  21. this.close();
  22. }
  23. }
  24. close() {
  25. this.open = false;
  26. setTimeout(() => {
  27. this.el.parentNode.removeChild(this.el);
  28. }, 500);
  29. }
  30. handleOptionClick(e, i) {
  31. e.stopPropagation();
  32. this.onSelection.emit(i);
  33. this.close();
  34. }
  35. render() {
  36. return (index.h("div", { class: `wrapper${this.open ? ' open' : ''}`, onClick: () => this.dismiss() }, index.h("div", { class: "content" }, index.h("div", { class: "title" }, this.header), this.options.map((option, i) => index.h("div", { class: "action-sheet-option", onClick: (e) => this.handleOptionClick(e, i) }, index.h("div", { class: "action-sheet-button" }, option.title))))));
  37. }
  38. get el() { return index.getElement(this); }
  39. };
  40. PWAActionSheet.style = actionSheetCss;
  41. exports.pwa_action_sheet = PWAActionSheet;