[ { "path": ".dockerignore", "content": ".git\n.idea\nDockerfile\n.docs.yaml\n.drone.yml\n.gitignore\nREADME.md\nsuper-tabs.sh\ndocs\nnode_modules\ncore/node_modules\ncore/dist\ncore/loader\ncore/hydrate\ncore/.stencil\nangular/node_modules\nangular/dist\nreact/node_modules\nreact/dist\nreact/dist-transpiled\n" }, { "path": ".docs.yaml", "content": "siteTitle: Super Tabs\ndescription: Swipeable tabs for Ionic apps\nrepo: https://github.com/zyra/ionic-super-tabs\noutDir: docs\nbaseUrl: https://zyra.github.io/ionic-super-tabs/\n\npagePatterns:\n- name: '{{ index .PathMatches 0 1 }}'\n sourceGlob: core/src/**/readme.md\n pattern: '([a-z-]+)/readme.md$'\n path: 'components/{{ index .PathMatches 0 1 }}'\n editOnGithub: true\n addToMenu: true\n menuGroup: components\n\npages:\n- name: home\n title: Super Tabs - Swipeable tabs for Ionic apps\n path: /\n source: doc-pages/home.md\n editOnGithub: true\n- name: config\n title: Configuration\n path: configuration\n source: doc-pages/configuration.md\n editOnGithub: true\n- name: install-ng\n title: Getting started with Angular\n path: getting-started/angular\n source: doc-pages/getting-started/angular.md\n editOnGithub: true\n- name: usage-ng\n title: Angular Usage Guide\n path: usage/angular\n source: doc-pages/usage/angular.md\n editOnGithub: true\n\n\nmenuItems:\n- title: Getting started\n name: getting-started\n group: true\n items:\n - title: Introduction\n - title: Angular\n link: getting-started/angular\n# - title: JavaScript\n# link: getting-started/javascript\n\n- title: Configuration\n link: configuration\n\n- title: Usage guide\n name: usage-guide\n group: true\n items:\n - title: Angular\n link: usage/angular\n\n- title: Components\n name: components\n group: true\n\ntemplates:\n- name: base\n source: .doctemplate\n" }, { "path": ".doctemplate", "content": "\n\n\n \n {{- .Title }}\n {{ if .Description }}{{ end }}\n {{ if .BaseURL }}{{ end }}\n \n \n \n \n \n\n\n\n

\n \n

\n\t\t{{ .Content }}\n

\n\n\n\n\n\n\n\n" }, { "path": ".drone.yml", "content": "---\nkind: pipeline\ntype: docker\nname: default\n\nclone:\n depth: 1\n\nvolumes:\n- name: dockersock\n host:\n path: /var/run/docker.sock\n\nsteps:\n- name: Fast build\n image: docker\n when:\n event:\n exclude:\n - tag\n volumes:\n - name: dockersock\n path: /var/run/docker.sock\n commands:\n - docker build .\n\n- name: Build\n image: node:12\n when:\n event:\n - tag\n commands:\n - npm i\n - ./super-tabs.sh setup\n - ./super-tabs.sh build\n\n- name: Publish\n image: node:12\n when:\n event:\n - tag\n environment:\n NPM_TOKEN:\n from_secret: npm_token\n commands:\n - echo '//registry.npmjs.org/:_authToken=$${NPM_TOKEN}' > ~/.npmrc\n - ./super-tabs.sh publish\n\n- name: Generate docs\n image: harbor.zyra.ca/public/zmdocs:v1.1.0\n when:\n branch:\n - master\n commands:\n - zmdocs g\n\n- name: Publish docs\n image: plugins/gh-pages\n when:\n event:\n exclude:\n - pull_request\n branch:\n - master\n settings:\n username:\n from_secret: gh_user\n password:\n from_secret: gh_token\n pages_directory: docs\n\n#- name: Update example project\n# image: plugins/downstream\n# settings:\n# server: https://drone.zyra.ca\n# token:\n# from_secret: drone_token\n# repositories:\n# - zyra/ionic-super-tabs-example\n# fork: true\n\n---\nkind: signature\nhmac: 325be6f79fe9c33c34d9376df0ffce76ae06e1e831666c434bdfa2c45837b85b\n\n...\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".gitignore", "content": "node_modules\n.idea\n.DS_STORE\ndocs\n" }, { "path": "CHANGELOG.md", "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [6.0.5](https://github.com/zyra/ionic-super-tabs/compare/v6.0.4...v6.0.5) (2019-11-13)\n\n\n### Bug Fixes\n\n* **super-tabs:** allow usage without a toolbar ([5247db7](https://github.com/zyra/ionic-super-tabs/commit/5247db7ba79c0e401e91878e78a9cc9c2763532e))\n" }, { "path": "Dockerfile", "content": "FROM node:12-alpine\nCOPY . .\nRUN npm i\nRUN npx lerna bootstrap\nRUN npm run build\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) 2019 Zyra Media Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Super Tabs\nSwipeable tabs module for Ionic apps.\n\n* [Packages](#packages)\n * [Ionic 4](#ionic-4)\n * [Ionic 2 / Ionic 3](#ionic-2--ionic-3)\n* [Documentation](https://zyra.github.io/ionic-super-tabs)\n * Getting started\n * [Angular](https://zyra.github.io/ionic-super-tabs/getting-started/angular)\n * JavaScript - WIP\n * Usage guide\n * [Angular](https://zyra.github.io/ionic-super-tabs/usage/angular)\n * JavaScript - WIP\n * [Configuration](https://zyra.github.io/ionic-super-tabs/configuration)\n* [Example Project](https://github.com/zyra/ionic-super-tabs-example)\n* [Notes](#notes)\n* [License](#license)\n\n---\n\n## Packages\n\n#### Ionic 4\nPackages published under the `@ionic-super-tabs/` scope are compatible with `@ionic/angular@^4.0.0` _(4.0.0 and above)_.\n\n> @ionic-super-tabs/core\n>\n> ![npm (scoped)](https://img.shields.io/npm/v/@ionic-super-tabs/core?style=flat-square)\n> ![npm](https://img.shields.io/npm/dt/@ionic-super-tabs/core?style=flat-square)\n> ![npm](https://img.shields.io/npm/dm/@ionic-super-tabs/core?style=flat-square)\n>\n>\n> @ionic-super-tabs/angular\n>\n> ![npm (scoped)](https://img.shields.io/npm/v/@ionic-super-tabs/angular?style=flat-square)\n> ![npm](https://img.shields.io/npm/dt/@ionic-super-tabs/angular?style=flat-square)\n> ![npm](https://img.shields.io/npm/dm/@ionic-super-tabs/angular?style=flat-square)\n\n#### Ionic 2 / Ionic 3\nFor Ionic 2 / Ionic 3 apps, see the [v5 branch](https://github.com/zyra/ionic-super-tabs/tree/v5) for the previous version of Super Tabs.\n\n> ionic2-super-tabs\n>\n> ![npm](https://img.shields.io/npm/v/ionic2-super-tabs?label=ionic2-super-tabs)\n> ![npm](https://img.shields.io/npm/dt/ionic2-super-tabs?style=flat-square)\n> ![npm](https://img.shields.io/npm/dm/ionic2-super-tabs?style=flat-square)\n\n---\n\n## Notes\nThis module has been tested with Angular and Stencil based apps only. \nCompatibility with React and Vue has not been tested yet.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n" }, { "path": "angular/.gitignore", "content": "build\nnode_modules\ndist\n" }, { "path": "angular/CHANGELOG.md", "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [6.0.5](https://github.com/zyra/ionic-super-tabs/compare/v6.0.4...v6.0.5) (2019-11-13)\n\n**Note:** Version bump only for package @ionic-super-tabs/angular\n" }, { "path": "angular/angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"super-tabs\": {\n \"projectType\": \"library\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"super\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-ng-packagr:build\",\n \"options\": {\n \"tsConfig\": \"tsconfig.lib.json\",\n \"project\": \"ng-package.json\"\n },\n \"configurations\": {\n \"production\": {\n \"tsConfig\": \"tsconfig.lib.prod.json\"\n }\n }\n }\n }\n }},\n \"defaultProject\": \"super-tabs\"\n}\n" }, { "path": "angular/ng-package.json", "content": "{\n \"$schema\": \"./node_modules/ng-packagr/ng-package.schema.json\",\n \"dest\": \"./dist/\",\n \"lib\": {\n \"entryFile\": \"src/public-api.ts\"\n },\n \"whitelistedNonPeerDependencies\": [\n \"@ionic-super-tabs/core\"\n ]\n}\n" }, { "path": "angular/package.json", "content": "{\n \"name\": \"@ionic-super-tabs/angular\",\n \"version\": \"7.0.8\",\n \"description\": \"Ionic Super Tabs bindings for Angular applications\",\n \"scripts\": {\n \"build\": \"ng build\",\n \"prebuild\": \"npm run clean\",\n \"test\": \"ng test\",\n \"clean\": \"rm -rf dist\"\n },\n \"author\": \"Zyra Media Inc. \",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@ionic-super-tabs/core\": \"^7.0.8\"\n },\n \"keywords\": [\n \"ionic\",\n \"swipeable\",\n \"tabs\",\n \"module\",\n \"component\",\n \"angular\"\n ],\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"~0.901.8\",\n \"@angular-devkit/build-ng-packagr\": \"~0.901.8\",\n \"@angular-devkit/core\": \"~9.1.8\",\n \"@angular-devkit/schematics\": \"~9.1.8\",\n \"@angular/cli\": \"~9.1.8\",\n \"@angular/common\": \"~9.1.11\",\n \"@angular/compiler\": \"~9.1.11\",\n \"@angular/compiler-cli\": \"~9.1.11\",\n \"@angular/core\": \"~9.1.11\",\n \"@angular/forms\": \"~9.1.11\",\n \"@angular/platform-browser\": \"~9.1.11\",\n \"@angular/platform-browser-dynamic\": \"~9.1.11\",\n \"@angular/router\": \"~9.1.11\",\n \"@types/node\": \"~14.0.13\",\n \"fs-extra\": \"~9.0.1\",\n \"glob\": \"~7.1.6\",\n \"ng-packagr\": \"~9.1.5\",\n \"rxjs\": \"~6.5.5\",\n \"tsickle\": \"~0.38.1\",\n \"tslint\": \"~5.15.0\",\n \"typescript\": \"~3.8.3\",\n \"zone.js\": \"~0.10.3\"\n }\n}\n" }, { "path": "angular/rollup.config.js", "content": "import resolve from 'rollup-plugin-node-resolve';\n\nexport default {\n input: 'build/es2015/core.js',\n output: [\n {\n file: 'dist/fesm2015.js',\n format: 'es',\n },\n ],\n external: (id) => {\n // anything else is external\n // Windows: C:\\xxxxxx\\xxx\n const colonPosition = 1;\n return !(id.startsWith('.') || id.startsWith('/') || id.charAt(colonPosition) === ':');\n },\n plugins: [\n resolve({\n module: true,\n }),\n ],\n};\n" }, { "path": "angular/rollup.config.legacy.js", "content": "import config from './rollup.config';\n\nconst newConfig = {\n ...config,\n input: 'build/es5/core.js',\n};\n\nnewConfig.output = [\n {\n file: 'dist/fesm5.js',\n format: 'es'\n },\n {\n file: 'dist/fesm5.cjs.js',\n format: 'cjs'\n }\n];\n\nexport { newConfig as default };\n" }, { "path": "angular/src/app-init.ts", "content": "import { NgZone } from '@angular/core';\nimport { applyPolyfills, defineCustomElements } from '@ionic-super-tabs/core/loader';\n\n\nlet didInitialize = false;\n\nexport function appInit(doc: Document, zone: NgZone) {\n return async function () {\n\n const win: any = doc.defaultView as any;\n\n\n if (!win || didInitialize) {\n return;\n }\n\n didInitialize = true;\n\n const aelFn = '__zone_symbol__addEventListener' in (doc.body as any)\n ? '__zone_symbol__addEventListener'\n : 'addEventListener';\n\n\n await applyPolyfills();\n\n await defineCustomElements(win, {\n syncQueue: true,\n raf,\n jmp: (h: any) => zone.runOutsideAngular(h),\n ael(elm, eventName, cb, opts) {\n (elm as any)[aelFn](eventName, cb, opts);\n },\n rel(elm, eventName, cb, opts) {\n elm.removeEventListener(eventName, cb, opts);\n },\n });\n };\n};\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\ndeclare const requestAnimationFrame: any;\n\nexport const raf = (h: any) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(h);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(h);\n }\n return setTimeout(h);\n};\n" }, { "path": "angular/src/directives/proxies-list.txt", "content": "\nimport * as d from './proxies';\n\nexport const DIRECTIVES = [\nd.SuperTab,\n d.SuperTabButton,\n d.SuperTabs,\n d.SuperTabsContainer,\n d.SuperTabsToolbar\n];\n" }, { "path": "angular/src/directives/proxies-utils.ts", "content": "/* tslint:disable */\nimport { fromEvent } from 'rxjs';\n\nexport const proxyInputs = (Cmp: any, inputs: string[]) => {\n const Prototype = Cmp.prototype;\n inputs.forEach(item => {\n Object.defineProperty(Prototype, item, {\n get() { return this.el[item]; },\n set(val: any) { this.z.runOutsideAngular(() => (this.el[item] = val)); }\n });\n });\n};\n\nexport const proxyMethods = (Cmp: any, methods: string[]) => {\n const Prototype = Cmp.prototype;\n methods.forEach(methodName => {\n Prototype[methodName] = function () {\n const args = arguments;\n return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));\n };\n });\n};\n\nexport const proxyOutputs = (instance: any, el: any, events: string[]) => {\n events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));\n}\n\n// tslint:disable-next-line: only-arrow-functions\nexport function ProxyCmp(opts: { inputs?: any; methods?: any }) {\n const decorator = function(cls: any){\n if (opts.inputs) {\n proxyInputs(cls, opts.inputs);\n }\n if (opts.methods) {\n proxyMethods(cls, opts.methods);\n }\n return cls;\n };\n return decorator;\n}\n" }, { "path": "angular/src/directives/proxies.ts", "content": "/* tslint:disable */\n/* auto-generated angular directive proxies */\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';\nimport { ProxyCmp, proxyOutputs } from './proxies-utils';\n\nimport { Components } from '@ionic-super-tabs/core'\n\nexport declare interface SuperTab extends Components.SuperTab {}\n@ProxyCmp({inputs: ['loaded', 'noScroll', 'visible'], 'methods': ['getRootScrollableEl']})\n@Component({ selector: 'super-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['loaded', 'noScroll', 'visible'] })\nexport class SuperTab {\n protected el: HTMLElement;\n constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {\n c.detach();\n this.el = r.nativeElement;\n }\n}\n\nexport declare interface SuperTabButton extends Components.SuperTabButton {}\n@ProxyCmp({inputs: ['disabled']})\n@Component({ selector: 'super-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled'] })\nexport class SuperTabButton {\n protected el: HTMLElement;\n constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {\n c.detach();\n this.el = r.nativeElement;\n }\n}\n\nexport declare interface SuperTabs extends Components.SuperTabs {}\n@ProxyCmp({inputs: ['activeTabIndex', 'config'], 'methods': ['setConfig', 'selectTab']})\n@Component({ selector: 'super-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['activeTabIndex', 'config'] })\nexport class SuperTabs {\n tabChange!: EventEmitter;\n protected el: HTMLElement;\n constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {\n c.detach();\n this.el = r.nativeElement;\n proxyOutputs(this, this.el, ['tabChange']);\n }\n}\n\nexport declare interface SuperTabsContainer extends Components.SuperTabsContainer {}\n@ProxyCmp({inputs: ['autoScrollTop', 'swipeEnabled'], 'methods': ['scrollToTop']})\n@Component({ selector: 'super-tabs-container', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['autoScrollTop', 'swipeEnabled'] })\nexport class SuperTabsContainer {\n activeTabIndexChange!: EventEmitter;\n selectedTabIndexChange!: EventEmitter;\n protected el: HTMLElement;\n constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {\n c.detach();\n this.el = r.nativeElement;\n proxyOutputs(this, this.el, ['activeTabIndexChange', 'selectedTabIndexChange']);\n }\n}\n\nexport declare interface SuperTabsToolbar extends Components.SuperTabsToolbar {}\n@ProxyCmp({inputs: ['color', 'scrollable', 'scrollablePadding', 'showIndicator']})\n@Component({ selector: 'super-tabs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['color', 'scrollable', 'scrollablePadding', 'showIndicator'] })\nexport class SuperTabsToolbar {\n buttonClick!: EventEmitter;\n protected el: HTMLElement;\n constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {\n c.detach();\n this.el = r.nativeElement;\n proxyOutputs(this, this.el, ['buttonClick']);\n }\n}\n" }, { "path": "angular/src/public-api.ts", "content": "export * from './directives/proxies';\nexport { SuperTabsModule } from './super-tabs.module';\n" }, { "path": "angular/src/super-tabs.module.ts", "content": "import { CommonModule, DOCUMENT } from '@angular/common';\nimport { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';\nimport { appInit } from './app-init';\nimport { SuperTab, SuperTabButton, SuperTabs, SuperTabsContainer, SuperTabsToolbar } from './directives/proxies';\n\nexport const DECLARATIONS = [\n SuperTab,\n SuperTabButton,\n SuperTabs,\n SuperTabsContainer,\n SuperTabsToolbar,\n];\n\n@NgModule({\n declarations: DECLARATIONS,\n exports: DECLARATIONS,\n imports: [CommonModule],\n})\nexport class SuperTabsModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: SuperTabsModule,\n providers: [\n {\n provide: APP_INITIALIZER,\n useFactory: appInit,\n multi: true,\n deps: [DOCUMENT, NgZone],\n },\n ],\n };\n }\n}\n" }, { "path": "angular/tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"downlevelIteration\": true,\n \"experimentalDecorators\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"importHelpers\": true,\n \"target\": \"es2015\",\n \"typeRoots\": [\n \"node_modules/@types\"\n ],\n \"lib\": [\n \"es2018\",\n \"dom\"\n ],\n \"paths\": {\n \"super-tabs\": [\n \"dist/super-tabs\"\n ],\n \"super-tabs/*\": [\n \"dist/super-tabs/*\"\n ]\n }\n },\n \"angularCompilerOptions\": {\n \"fullTemplateTypeCheck\": true,\n \"strictInjectionParameters\": true,\n \"enableIvy\": false\n }\n}\n" }, { "path": "angular/tsconfig.legacy.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"declarationDir\": \"build/es5\",\n \"outDir\": \"build/es5\"\n }\n}\n" }, { "path": "angular/tsconfig.lib.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/lib\",\n \"target\": \"es2015\",\n \"declaration\": true,\n \"inlineSources\": true,\n \"types\": [],\n \"lib\": [\n \"dom\",\n \"es2018\"\n ]\n },\n \"angularCompilerOptions\": {\n \"skipTemplateCodegen\": true,\n \"strictMetadataEmit\": true,\n \"enableResourceInlining\": true\n },\n \"exclude\": [\n \"src/test.ts\",\n \"**/*.spec.ts\"\n ]\n}\n" }, { "path": "angular/tsconfig.lib.prod.json", "content": "{\n \"extends\": \"./tsconfig.lib.json\",\n \"angularCompilerOptions\": {\n \"enableIvy\": false\n }\n}\n" }, { "path": "angular/tslint.json", "content": "{\n \"extends\": \"tslint:recommended\",\n \"rulesDirectory\": [\n \"codelyzer\"\n ],\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\": {\n \"severity\": \"warning\"\n },\n \"import-blacklist\": [\n true,\n \"rxjs/Rx\"\n ],\n \"interface-name\": false,\n \"max-classes-per-file\": false,\n \"max-line-length\": [\n true,\n 140\n ],\n \"member-access\": false,\n \"member-ordering\": [\n true,\n {\n \"order\": [\n \"static-field\",\n \"instance-field\",\n \"static-method\",\n \"instance-method\"\n ]\n }\n ],\n \"no-consecutive-blank-lines\": false,\n \"no-console\": [\n true,\n \"debug\",\n \"info\",\n \"time\",\n \"timeEnd\",\n \"trace\"\n ],\n \"no-empty\": false,\n \"no-inferrable-types\": [\n true,\n \"ignore-params\"\n ],\n \"no-non-null-assertion\": true,\n \"no-redundant-jsdoc\": true,\n \"no-switch-case-fall-through\": true,\n \"no-var-requires\": false,\n \"object-literal-key-quotes\": [\n true,\n \"as-needed\"\n ],\n \"object-literal-sort-keys\": false,\n \"ordered-imports\": false,\n \"quotemark\": [\n true,\n \"single\"\n ],\n \"trailing-comma\": false,\n \"component-class-suffix\": true,\n \"contextual-lifecycle\": true,\n \"directive-class-suffix\": true,\n \"no-conflicting-lifecycle\": true,\n \"no-host-metadata-property\": true,\n \"no-input-rename\": true,\n \"no-inputs-metadata-property\": true,\n \"no-output-native\": true,\n \"no-output-on-prefix\": true,\n \"no-output-rename\": true,\n \"no-outputs-metadata-property\": true,\n \"template-banana-in-box\": true,\n \"template-no-negated-async\": true,\n \"use-lifecycle-interface\": true,\n \"use-pipe-transform-interface\": true\n }\n}\n" }, { "path": "core/.gitignore", "content": "node_modules\ndist\nstats.json\n.stencil\nloader\nhydrate\n" }, { "path": "core/CHANGELOG.md", "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [6.0.5](https://github.com/zyra/ionic-super-tabs/compare/v6.0.4...v6.0.5) (2019-11-13)\n\n\n### Bug Fixes\n\n* **super-tabs:** allow usage without a toolbar ([5247db7](https://github.com/zyra/ionic-super-tabs/commit/5247db7ba79c0e401e91878e78a9cc9c2763532e))\n" }, { "path": "core/package.json", "content": "{\n \"name\": \"@ionic-super-tabs/core\",\n \"version\": \"7.0.8\",\n \"description\": \"\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"es2015\": \"dist/esm/index.mjs\",\n \"es2017\": \"dist/esm/index.mjs\",\n \"jsnext:main\": \"dist/esm/index.mjs\",\n \"collection:main\": \"dist/collection/index.js\",\n \"collection\": \"dist/collection/collection-manifest.json\",\n \"types\": \"dist/types/interface.d.ts\",\n \"files\": [\n \"dist/\",\n \"loader/\",\n \"hydrate/\"\n ],\n \"scripts\": {\n \"build\": \"stencil build\"\n },\n \"keywords\": [\n \"ionic\",\n \"swipeable\",\n \"tabs\",\n \"module\",\n \"component\"\n ],\n \"author\": \"Zyra Media Inc.\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@ionic/core\": \"~5.2.1\",\n \"@stencil/angular-output-target\": \"0.0.2\",\n \"@stencil/core\": \"~1.14.0\",\n \"@stencil/react-output-target\": \"0.0.6\",\n \"@stencil/sass\": \"~1.3.1\"\n }\n}\n" }, { "path": "core/src/components.d.ts", "content": "/* eslint-disable */\n/* tslint:disable */\n/**\n * This is an autogenerated file created by the Stencil compiler.\n * It contains typing information for all components that exist in this project.\n */\nimport { HTMLStencilElement, JSXBase } from \"@stencil/core/internal\";\nimport { SuperTabChangeEventDetail, SuperTabsConfig } from \"./interface\";\nexport namespace Components {\n interface SuperTab {\n /**\n * Returns the root scrollable element\n */\n \"getRootScrollableEl\": () => Promise;\n \"loaded\": boolean;\n /**\n * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`. This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`.\n */\n \"noScroll\": boolean;\n \"visible\": boolean;\n }\n interface SuperTabButton {\n \"active\"?: boolean;\n /**\n * Whether the button is disabled\n */\n \"disabled\"?: boolean;\n \"index\"?: number;\n \"scrollableContainer\": boolean;\n }\n interface SuperTabIndicator {\n /**\n * Toolbar position This determines the position of the indicator\n */\n \"toolbarPosition\": 'top' | 'bottom';\n }\n interface SuperTabs {\n /**\n * Initial active tab index. Defaults to `0`.\n * @type {number}\n */\n \"activeTabIndex\": number;\n /**\n * Global Super Tabs configuration. This is the only place you need to configure the components. Any changes to this input will propagate to child components.\n * @type {SuperTabsConfig}\n */\n \"config\"?: SuperTabsConfig;\n /**\n * Set the selected tab. This will move the container and the toolbar to the selected tab.\n * @param index the index of the tab you want to select\n * @param animate whether you want to animate the transition\n * @param emit whether you want to emit tab change event\n */\n \"selectTab\": (index: number, animate?: boolean, emit?: boolean) => Promise;\n /**\n * Set/update the configuration\n * @param config Configuration object\n */\n \"setConfig\": (config: SuperTabsConfig) => Promise;\n }\n interface SuperTabsContainer {\n /**\n * Set to true to automatically scroll to the top of the tab when the button is clicked while the tab is already selected.\n */\n \"autoScrollTop\": boolean;\n \"config\"?: SuperTabsConfig;\n /**\n * @param scrollX\n * @param animate\n */\n \"moveContainer\": (scrollX: number, animate?: boolean | undefined) => Promise;\n /**\n * @param index Index of the tab\n * @param animate Whether to animate the transition\n */\n \"moveContainerByIndex\": (index: number, animate?: boolean | undefined) => Promise;\n \"reindexTabs\": () => Promise;\n /**\n * Scroll the active tab to the top.\n */\n \"scrollToTop\": () => Promise;\n \"setActiveTabIndex\": (index: number, moveContainer?: boolean, animate?: boolean) => Promise;\n /**\n * Enable/disable swiping\n */\n \"swipeEnabled\": boolean;\n }\n interface SuperTabsToolbar {\n /**\n * Background color. Defaults to `'primary'`\n */\n \"color\": string | undefined;\n \"config\"?: SuperTabsConfig;\n \"moveContainer\": (scrollX: number, animate?: boolean | undefined) => Promise;\n /**\n * Whether the toolbar is scrollable. Defaults to `false`.\n */\n \"scrollable\": boolean;\n /**\n * If scrollable is set to true, there will be an added padding to the left of the buttons. Setting this property to false will remove that padding. The padding is also configurable via a CSS variable.\n */\n \"scrollablePadding\": boolean;\n \"setActiveTab\": (index: number, align?: boolean | undefined, animate?: boolean | undefined) => Promise;\n \"setSelectedTab\": (index: number, animate?: boolean | undefined) => Promise;\n /**\n * Whether to show the indicator. Defaults to `true`\n */\n \"showIndicator\": boolean;\n }\n}\ndeclare global {\n interface HTMLSuperTabElement extends Components.SuperTab, HTMLStencilElement {\n }\n var HTMLSuperTabElement: {\n prototype: HTMLSuperTabElement;\n new (): HTMLSuperTabElement;\n };\n interface HTMLSuperTabButtonElement extends Components.SuperTabButton, HTMLStencilElement {\n }\n var HTMLSuperTabButtonElement: {\n prototype: HTMLSuperTabButtonElement;\n new (): HTMLSuperTabButtonElement;\n };\n interface HTMLSuperTabIndicatorElement extends Components.SuperTabIndicator, HTMLStencilElement {\n }\n var HTMLSuperTabIndicatorElement: {\n prototype: HTMLSuperTabIndicatorElement;\n new (): HTMLSuperTabIndicatorElement;\n };\n interface HTMLSuperTabsElement extends Components.SuperTabs, HTMLStencilElement {\n }\n var HTMLSuperTabsElement: {\n prototype: HTMLSuperTabsElement;\n new (): HTMLSuperTabsElement;\n };\n interface HTMLSuperTabsContainerElement extends Components.SuperTabsContainer, HTMLStencilElement {\n }\n var HTMLSuperTabsContainerElement: {\n prototype: HTMLSuperTabsContainerElement;\n new (): HTMLSuperTabsContainerElement;\n };\n interface HTMLSuperTabsToolbarElement extends Components.SuperTabsToolbar, HTMLStencilElement {\n }\n var HTMLSuperTabsToolbarElement: {\n prototype: HTMLSuperTabsToolbarElement;\n new (): HTMLSuperTabsToolbarElement;\n };\n interface HTMLElementTagNameMap {\n \"super-tab\": HTMLSuperTabElement;\n \"super-tab-button\": HTMLSuperTabButtonElement;\n \"super-tab-indicator\": HTMLSuperTabIndicatorElement;\n \"super-tabs\": HTMLSuperTabsElement;\n \"super-tabs-container\": HTMLSuperTabsContainerElement;\n \"super-tabs-toolbar\": HTMLSuperTabsToolbarElement;\n }\n}\ndeclare namespace LocalJSX {\n interface SuperTab {\n \"loaded\"?: boolean;\n /**\n * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`. This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`.\n */\n \"noScroll\": boolean;\n \"visible\"?: boolean;\n }\n interface SuperTabButton {\n \"active\"?: boolean;\n /**\n * Whether the button is disabled\n */\n \"disabled\"?: boolean;\n \"index\"?: number;\n \"scrollableContainer\"?: boolean;\n }\n interface SuperTabIndicator {\n /**\n * Toolbar position This determines the position of the indicator\n */\n \"toolbarPosition\"?: 'top' | 'bottom';\n }\n interface SuperTabs {\n /**\n * Initial active tab index. Defaults to `0`.\n * @type {number}\n */\n \"activeTabIndex\"?: number;\n /**\n * Global Super Tabs configuration. This is the only place you need to configure the components. Any changes to this input will propagate to child components.\n * @type {SuperTabsConfig}\n */\n \"config\"?: SuperTabsConfig;\n /**\n * Tab change event. This event fires up when a tab button is clicked, or when a user swipes between tabs. The event will fire even if the tab did not change, you can check if the tab changed by checking the `changed` property in the event detail.\n */\n \"onTabChange\"?: (event: CustomEvent) => void;\n }\n interface SuperTabsContainer {\n /**\n * Set to true to automatically scroll to the top of the tab when the button is clicked while the tab is already selected.\n */\n \"autoScrollTop\"?: boolean;\n \"config\"?: SuperTabsConfig;\n /**\n * Emits an event when the active tab changes. An active tab is the tab that the user looking at. This event emitter will not notify you if the user has changed the current active tab. If you need that information, you should use the `tabChange` event emitted by the `super-tabs` element.\n */\n \"onActiveTabIndexChange\"?: (event: CustomEvent) => void;\n /**\n * Emits events when the container moves. Selected tab index represents what the user should be seeing. If you receive a decimal as the emitted number, it means that the container is moving between tabs. This number is used for animations, and can be used for high tab customizations.\n */\n \"onSelectedTabIndexChange\"?: (event: CustomEvent) => void;\n /**\n * Enable/disable swiping\n */\n \"swipeEnabled\"?: boolean;\n }\n interface SuperTabsToolbar {\n /**\n * Background color. Defaults to `'primary'`\n */\n \"color\"?: string | undefined;\n \"config\"?: SuperTabsConfig;\n /**\n * Emits an event when a button is clicked Event data contains the clicked SuperTabButton component\n */\n \"onButtonClick\"?: (event: CustomEvent) => void;\n /**\n * Whether the toolbar is scrollable. Defaults to `false`.\n */\n \"scrollable\"?: boolean;\n /**\n * If scrollable is set to true, there will be an added padding to the left of the buttons. Setting this property to false will remove that padding. The padding is also configurable via a CSS variable.\n */\n \"scrollablePadding\"?: boolean;\n /**\n * Whether to show the indicator. Defaults to `true`\n */\n \"showIndicator\"?: boolean;\n }\n interface IntrinsicElements {\n \"super-tab\": SuperTab;\n \"super-tab-button\": SuperTabButton;\n \"super-tab-indicator\": SuperTabIndicator;\n \"super-tabs\": SuperTabs;\n \"super-tabs-container\": SuperTabsContainer;\n \"super-tabs-toolbar\": SuperTabsToolbar;\n }\n}\nexport { LocalJSX as JSX };\ndeclare module \"@stencil/core\" {\n export namespace JSX {\n interface IntrinsicElements {\n \"super-tab\": LocalJSX.SuperTab & JSXBase.HTMLAttributes;\n \"super-tab-button\": LocalJSX.SuperTabButton & JSXBase.HTMLAttributes;\n \"super-tab-indicator\": LocalJSX.SuperTabIndicator & JSXBase.HTMLAttributes;\n \"super-tabs\": LocalJSX.SuperTabs & JSXBase.HTMLAttributes;\n \"super-tabs-container\": LocalJSX.SuperTabsContainer & JSXBase.HTMLAttributes;\n \"super-tabs-toolbar\": LocalJSX.SuperTabsToolbar & JSXBase.HTMLAttributes;\n }\n }\n}\n" }, { "path": "core/src/index.ts", "content": "export { DEFAULT_CONFIG } from './utils';\nexport { SuperTabsConfig } from './interface';\n" }, { "path": "core/src/interface.d.ts", "content": "export * from './components';\n\n/**\n * Configuration object for the `super-tabs` component.\n */\nexport interface SuperTabsConfig {\n /**\n * Max drag angle in degrees.\n *\n * Defaults to `40`\n */\n maxDragAngle?: number;\n\n /**\n * Drag threshold in pixels.\n *\n * This value defines how far the user have to swipe for the swipe to be treated as a swipe gesture.\n *\n * Defaults to `20`\n */\n dragThreshold?: number;\n\n /**\n * Allows elements inside tabs to be dragged or scrolled through.\n *\n * Setting this value to `true` will allow touch events to be propagated to child components.\n *\n * Defaults to `false`.\n */\n allowElementScroll?: boolean;\n\n /**\n * Transition duration in milliseconds.\n *\n * This value is used for all transitions and animations.\n *\n * Defaults to `150`.\n */\n transitionDuration?: number;\n\n /**\n * Side menu location.\n *\n * If this value is set to `right` or `left`, the super tabs component will avoid listening to swipe events\n * in the specified region(s) to avoid interfering with a side menu event listeners.\n *\n * Defaults to `undefined`.\n */\n sideMenu?: 'left' | 'right' | 'both';\n\n /**\n * Side menu threshold in pixels.\n *\n * Defaults to `50`.\n */\n sideMenuThreshold?: number;\n\n /**\n * Short swipe duration in milliseconds.\n *\n * Short swipe is when a user quickly swipes between tabs. If the swipe duration is less than or equal to this\n * configured value, then we assume that the user wants to switch tabs.\n * To disable this behaviour set this value to `0`.\n *\n * Defaults to `300`\n */\n shortSwipeDuration?: number;\n\n /**\n * Enable debug mode.\n * Defaults to `false`.\n */\n debug?: boolean;\n\n /**\n * Whether the container should look and avoid elements with avoid-super-tabs attribute\n */\n avoidElements?: boolean;\n\n nativeSmoothScroll?: boolean;\n\n lazyLoad?: boolean;\n unloadWhenInvisible?: boolean;\n}\n\n/**\n * Event detail emitted by the `tabChange` event from the `super-tabs` component.\n */\nexport interface SuperTabChangeEventDetail {\n /**\n * Selected tab index.\n */\n index: number;\n\n /**\n * Indicates whether the tab index has changed.\n */\n changed: boolean;\n}\n\n" }, { "path": "core/src/mixins.scss", "content": "@import \"./variables\";\n\n@mixin st-button-variables() {\n --st-base-color-active: #{$st-button-base-color-active};\n --st-base-color-inactive: #{$st-button-base-color-inactive};\n\n --st-icon-size: #{$st-button-icon-size};\n --st-icon-color-inactive: #{$st-button-icon-color-inactive};\n --st-icon-color-active: #{$st-button-icon-color-active};\n\n --st-label-line-height: #{$st-button-label-line-height};\n --st-label-height: #{$st-button-label-height};\n --st-label-font-size: #{$st-button-label-font-size};\n --st-label-text-transform: #{$st-button-label-text-transform};\n --st-label-font-weight: #{$st-button-label-font-weight};\n --st-label-padding-bottom: #{$st-button-label-padding-bottom};\n --st-label-color-inactive: #{$st-button-label-color-inactive};\n --st-label-color-active: #{$st-button-label-color-active};\n}\n\n@mixin st-tab-variables() {\n --super-tab-width: #{$st-width};\n --super-tab-height: #{$st-height};\n}\n\n@mixin st-indicator-variables() {\n --st-indicator-height: #{$st-indicator-height};\n --st-indicator-color: #{$st-indicator-color};\n}\n\n@mixin st-toolbar-variables() {\n --st-scrollable-toolbar-padding-left: #{$st-scrollable-toolbar-padding-left};\n --super-tabs-toolbar-background: #{$st-toolbar-background};\n}\n" }, { "path": "core/src/super-tab/readme.md", "content": "# super-tab\n\n\n\n\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |\n| `loaded` | `loaded` | | `boolean` | `false` |\n| `noScroll` _(required)_ | `no-scroll` | Set this to true to prevent vertical scrolling of this tab. Defaults to `false`. This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`. | `boolean` | `undefined` |\n| `visible` | `visible` | | `boolean` | `false` |\n\n\n## Methods\n\n### `getRootScrollableEl() => Promise`\n\nReturns the root scrollable element\n\n#### Returns\n\nType: `Promise`\n\n\n\n\n## CSS Custom Properties\n\n| Name | Description |\n| -------------------- | -------------------------------------- |\n| `--super-tab-height` | Height of the tab. Defaults to `100%`. |\n| `--super-tab-width` | Width of the tab. Defaults to `100vw`. |\n\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n" }, { "path": "core/src/super-tab/super-tab.component.scss", "content": "@import \"../variables\";\n\n:host {\n /**\n * @prop --super-tab-width: Width of the tab. Defaults to `100vw`.\n * @prop --super-tab-height: Height of the tab. Defaults to `100%`.\n */\n\n height: var(--super-tab-height, $st-height);\n position: relative;\n display: block;\n overflow-x: hidden;\n overflow-y: auto;\n contain: size style;\n\n &[noScroll] {\n overflow-y: hidden;\n }\n\n z-index: 1;\n flex-shrink: 0;\n flex-grow: 0;\n width: var(--super-tab-width, $st-width);\n transform: translate3d(0,0,0);\n box-sizing: border-box;\n order: -1;\n\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n -webkit-font-smoothing: antialiased;\n}\n\nion-nav, ion-content {\n height: 100%;\n max-height: 100%;\n position: absolute;\n\n > .ion-page {\n position: absolute;\n }\n}\n" }, { "path": "core/src/super-tab/super-tab.component.tsx", "content": "import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\n\n\n@Component({\n tag: 'super-tab',\n styleUrl: 'super-tab.component.scss',\n shadow: true,\n scoped: false,\n})\nexport class SuperTabComponent implements ComponentInterface {\n @Element() el!: HTMLSuperTabElement;\n\n /**\n * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.\n *\n * This property will automatically be set to true if there is\n * a direct child element of `ion-content`. To override this\n * behaviour make sure to explicitly set this property to `false`.\n */\n @Prop({\n reflect: true,\n }) noScroll!: boolean;\n\n @Prop() loaded = false;\n @Prop() visible = false;\n\n componentDidLoad() {\n this.checkIonContent();\n }\n\n componentDidUpdate() {\n // check for ion-content after update, in case it was dynamically loaded\n this.checkIonContent();\n }\n\n /**\n * Check if we have an ion-content as a child and update the `noScroll` property\n * if it's not set yet.\n */\n private checkIonContent() {\n if (typeof this.noScroll !== 'boolean') {\n const ionContentEl = this.el.querySelector('ion-content');\n\n if (ionContentEl && ionContentEl.parentElement === this.el) {\n this.noScroll = true;\n }\n }\n }\n\n /**\n * Returns the root scrollable element\n */\n @Method()\n async getRootScrollableEl(): Promise {\n if (!this.noScroll && this.el.scrollHeight > this.el.clientHeight) {\n return this.el;\n }\n\n const ionContent: any = this.el.querySelector('ion-content');\n\n if (ionContent) {\n return ionContent.getScrollElement();\n }\n\n if (this.noScroll) {\n return null;\n }\n\n return this.el;\n }\n\n render() {\n return \n {\n this.loaded ? : null\n }\n ;\n }\n}\n" }, { "path": "core/src/super-tab-button/readme.md", "content": "# super-tab-button\n\n\n\n\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------- | ---------- | ------------------------------ | ---------------------- | ----------- |\n| `disabled` | `disabled` | Whether the button is disabled | `boolean \\| undefined` | `undefined` |\n\n\n## CSS Custom Properties\n\n| Name | Description |\n| --------------------------- | --------------------------------------------------------------------------------------- |\n| `--st-base-color-active` | base color for active buttons. Defaults to `--ion-color-contrast`. |\n| `--st-base-color-inactive` | base color for inactive buttons. Defaults to `rgba(var(--ion-color-contrast-rgb), 0.7)` |\n| `--st-icon-color-active` | active icon color. Defaults to `var(--st-base-color-active)` |\n| `--st-icon-color-inactive` | inactive icon color. Defaults to `var(--st-base-color-inactive)` |\n| `--st-icon-size` | icon size. Defaults to `24px`. |\n| `--st-label-color-active` | active label color. Defaults to `var(--st-base-color-active)` |\n| `--st-label-color-inactive` | inactive label color. Defaults to `var(--st-base-color-inactive)` |\n| `--st-label-font-size` | Font size of the label. Defaults to `14px`. |\n| `--st-label-font-weight` | Font weight of the label. Defaults to `500` |\n| `--st-label-height` | label height. Defaults to `14px` |\n| `--st-label-line-height` | label line height. Defaults to `14px` |\n| `--st-label-padding-bottom` | label padding bottom. Defaults to `16px` |\n| `--st-label-text-transform` | Text transformation to apply to the label text. Defaults to `uppercase`. |\n\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n" }, { "path": "core/src/super-tab-button/super-tab-button.component.scss", "content": "@import \"../variables\";\n\n@mixin labelIcon {\n ion-label, ion-icon, ::slotted(ion-label), ::slotted(ion-icon) {\n @content\n }\n}\n\n@mixin label {\n ion-label, ::slotted(ion-label) {\n @content\n }\n}\n\n@mixin icon {\n ion-icon, ::slotted(ion-icon) {\n @content\n }\n}\n\n:host {\n /**\n * @prop --st-base-color-active: base color for active buttons. Defaults to `--ion-color-contrast`.\n * @prop --st-base-color-inactive: base color for inactive buttons. Defaults to `rgba(var(--ion-color-contrast-rgb), 0.7)`\n * @prop --st-icon-size: icon size. Defaults to `24px`.\n * @prop --st-icon-color-inactive: inactive icon color. Defaults to `var(--st-base-color-inactive)`\n * @prop --st-icon-color-active: active icon color. Defaults to `var(--st-base-color-active)`\n * @prop --st-label-line-height: label line height. Defaults to `14px`\n * @prop --st-label-height: label height. Defaults to `14px`\n * @prop --st-label-font-size: Font size of the label. Defaults to `14px`.\n * @prop --st-label-text-transform: Text transformation to apply to the label text. Defaults to `uppercase`.\n * @prop --st-label-font-weight: Font weight of the label. Defaults to `500`\n * @prop --st-label-padding-bottom: label padding bottom. Defaults to `16px`\n * @prop --st-label-color-inactive: inactive label color. Defaults to `var(--st-base-color-inactive)`\n * @prop --st-label-color-active: active label color. Defaults to `var(--st-base-color-active)`\n */\n\n flex: 1 0 0;\n cursor: pointer;\n position: relative;\n max-width: 100%;\n overflow: hidden;\n display: flex;\n flex-flow: column nowrap;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n transform: translate3d(0, 0, 0);\n height: 72px;\n padding: 0 24px;\n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-font-smoothing: antialiased;\n\n @include labelIcon {\n transition-property: all;\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-delay: 0s;\n box-sizing: content-box !important;\n -webkit-user-select: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-font-smoothing: antialiased;\n }\n\n @include label {\n color: var(--st-label-color-inactive, $st-button-label-color-inactive);\n line-height: var(--st-label-line-height, $st-button-label-line-height);\n height: var(--st-label-height, $st-button-label-height);\n font-size: var(--st-label-font-size, $st-button-label-font-size);\n text-transform: var(--st-label-text-transform, $st-button-label-text-transform);\n font-weight: var(--st-label-font-weight, $st-button-label-font-weight);\n padding-bottom: var(--st-label-padding-bottom, $st-button-label-padding-bottom);\n }\n\n @include icon {\n color: var(--st-icon-color-inactive, $st-button-icon-color-inactive);\n fill: var(--st-icon-color-inactive, $st-button-icon-color-inactive);\n min-height: var(--st-icon-size, $st-button-icon-size);\n min-width: var(--st-icon-size, $st-button-icon-size);\n font-size: var(--st-icon-size, $st-button-icon-size);\n padding-top: 12px;\n }\n}\n\n@media(hover: hover) {\n :host(:hover) {\n background: rgba(var(--ion-color-contrast-rgb), 0.04);\n }\n}\n\n\n:host(.active) {\n @include labelIcon {\n transition-delay: 75ms;\n }\n\n @include label {\n color: var(--st-label-color-active, $st-button-label-color-active);\n }\n\n @include icon {\n color: var(--st-icon-color-active, $st-button-label-color-active);\n fill: var(--st-icon-color-active, $st-button-label-color-active);\n }\n}\n\n:host(.icon-only), :host(.label-only) {\n height: 48px;\n justify-content: center;\n}\n\n:host(.scrollableContainer) {\n flex-grow: 0;\n flex-basis: auto;\n min-width: 90px;\n max-width: 360px;\n}\n\n::slotted {\n flex-shrink: 1;\n}\n\n:host(.label-only) {\n @include label {\n padding-bottom: 0;\n }\n}\n\n:host(.icon-only) {\n @include icon {\n padding-top: 0;\n }\n}\n" }, { "path": "core/src/super-tab-button/super-tab-button.component.tsx", "content": "import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n\nconst maxRetryAttempts = 1e3;\n\n@Component({\n tag: 'super-tab-button',\n styleUrl: 'super-tab-button.component.scss',\n shadow: true,\n})\nexport class SuperTabButtonComponent implements ComponentInterface {\n @Element() el!: HTMLSuperTabButtonElement;\n\n /** @internal */\n @Prop({ reflectToAttr: true }) active?: boolean;\n\n /** @internal */\n @Prop({ reflectToAttr: true }) index?: number;\n\n /**\n * Whether the button is disabled\n */\n @Prop({ reflectToAttr: true }) disabled?: boolean;\n\n /** @internal */\n @Prop() scrollableContainer: boolean = false;\n\n @State() label!: HTMLElement | null;\n @State() icon!: HTMLElement | null;\n\n private retryAttempts: number = 0;\n\n componentDidLoad() {\n this.indexChildren();\n this.initCmp();\n }\n\n private initCmp() {\n if (!this.el || !this.el.shadowRoot) {\n if (++this.retryAttempts < maxRetryAttempts) {\n requestAnimationFrame(() => this.initCmp());\n return;\n }\n }\n\n if (!this.label && !this.icon) {\n this.indexChildren();\n }\n\n const slot = this.el!.shadowRoot!.querySelector('slot');\n slot!.addEventListener('slotchange', () => {\n this.indexChildren();\n });\n }\n\n private indexChildren() {\n this.label = this.el.querySelector('ion-label');\n this.icon = this.el.querySelector('ion-icon');\n }\n\n render() {\n return (\n \n \n \n \n );\n }\n}\n" }, { "path": "core/src/super-tab-indicator/readme.md", "content": "# super-tab-indicator\n\n\n\n\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------- | ------------------ | -------------------------------------------------------------- | ------------------- | ------- |\n| `toolbarPosition` | `toolbar-position` | Toolbar position This determines the position of the indicator | `\"bottom\" \\| \"top\"` | `'top'` |\n\n\n## Dependencies\n\n### Used by\n\n - [super-tabs-toolbar](../super-tabs-toolbar)\n\n### Graph\n```mermaid\ngraph TD;\n super-tabs-toolbar --> super-tab-indicator\n style super-tab-indicator fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n" }, { "path": "core/src/super-tab-indicator/super-tab-indicator.component.scss", "content": "@import \"../variables\";\n\n:host {\n display: block;\n height: var(--st-indicator-height, $st-indicator-height);\n width: 100px;\n background: var(--st-indicator-color, $st-indicator-color);\n position: absolute;\n pointer-events: none;\n touch-action: none;\n left: 0;\n transform-origin: 0;\n transform: translate3d(var(--st-indicator-position-x, 0), 0, 0) scale3d(var(--st-indicator-scale-x, 0), 1, 1);\n transition: transform var(--st-indicator-transition-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n box-sizing: border-box;\n order: -1;\n\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-font-smoothing: antialiased;\n}\n" }, { "path": "core/src/super-tab-indicator/super-tab-indicator.component.tsx", "content": "import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n\n@Component({\n tag: 'super-tab-indicator',\n styleUrl: 'super-tab-indicator.component.scss',\n shadow: true,\n})\nexport class SuperTabIndicatorComponent implements ComponentInterface {\n\n /**\n * Toolbar position\n * This determines the position of the indicator\n */\n @Prop() toolbarPosition: 'top' | 'bottom' = 'top';\n\n render() {\n const style: any = {};\n\n if (this.toolbarPosition === 'bottom') {\n style.top = 0;\n } else {\n style.bottom = 0;\n }\n\n return (\n \n );\n }\n}\n" }, { "path": "core/src/super-tabs/readme.md", "content": "# super-tabs\n\n\n\n\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------- |\n| `activeTabIndex` | `active-tab-index` | Initial active tab index. Defaults to `0`. | `number` | `0` |\n| `config` | -- | Global Super Tabs configuration. This is the only place you need to configure the components. Any changes to this input will propagate to child components. | `SuperTabsConfig \\| undefined` | `undefined` |\n\n\n## Events\n\n| Event | Description | Type |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- |\n| `tabChange` | Tab change event. This event fires up when a tab button is clicked, or when a user swipes between tabs. The event will fire even if the tab did not change, you can check if the tab changed by checking the `changed` property in the event detail. | `CustomEvent` |\n\n\n## Methods\n\n### `selectTab(index: number, animate?: boolean, emit?: boolean) => Promise`\n\nSet the selected tab.\nThis will move the container and the toolbar to the selected tab.\n\n#### Returns\n\nType: `Promise`\n\n\n\n### `setConfig(config: SuperTabsConfig) => Promise`\n\nSet/update the configuration\n\n#### Returns\n\nType: `Promise`\n\n\n\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n" }, { "path": "core/src/super-tabs/super-tabs.component.scss", "content": ":host {\n height: 100%;\n max-height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 1;\n position: relative;\n contain: layout size style;\n order: -1;\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-font-smoothing: antialiased;\n touch-action: none;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n" }, { "path": "core/src/super-tabs/super-tabs.component.tsx", "content": "import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { SuperTabChangeEventDetail, SuperTabsConfig } from '../interface';\nimport { debugLog, DEFAULT_CONFIG } from '../utils';\n\n\nconst maxInitRetries: number = 1e3;\n\n/**\n * Root component that controls the other super-tab components.\n *\n * This component propagates configuration over to children and keeps track of the tabs state.\n */\n@Component({\n tag: 'super-tabs',\n styleUrl: 'super-tabs.component.scss',\n shadow: true,\n})\nexport class SuperTabsComponent implements ComponentInterface {\n @Element() el!: HTMLSuperTabsElement;\n\n /**\n * Tab change event.\n *\n * This event fires up when a tab button is clicked, or when a user swipes between tabs.\n *\n * The event will fire even if the tab did not change, you can check if the tab changed by checking the `changed`\n * property in the event detail.\n */\n @Event() tabChange!: EventEmitter;\n\n /**\n * Global Super Tabs configuration.\n *\n * This is the only place you need to configure the components. Any changes to this input will propagate to child\n * components.\n *\n * @type {SuperTabsConfig}\n */\n @Prop() config?: SuperTabsConfig;\n\n /**\n * Initial active tab index.\n * Defaults to `0`.\n *\n * @type {number}\n */\n @Prop({ reflectToAttr: true, mutable: true }) activeTabIndex: number = 0;\n\n private container!: HTMLSuperTabsContainerElement;\n private toolbar!: HTMLSuperTabsToolbarElement;\n private _config: SuperTabsConfig = DEFAULT_CONFIG;\n private initAttempts: number = 0;\n private readonly initPromise: Promise;\n private initPromiseResolve!: Function;\n\n constructor() {\n this.initPromise = new Promise((resolve) => {\n this.initPromiseResolve = resolve;\n });\n }\n\n /**\n * Set/update the configuration\n * @param {SuperTabsConfig} config Configuration object\n */\n @Method()\n async setConfig(config: SuperTabsConfig) {\n this._config = { ...DEFAULT_CONFIG, ...config };\n }\n\n private propagateConfig() {\n this.container && (this.container.config = this._config);\n this.toolbar && (this.toolbar.config = this._config);\n }\n\n /**\n * Set the selected tab.\n * This will move the container and the toolbar to the selected tab.\n * @param index {number} the index of the tab you want to select\n * @param [animate=true] {boolean} whether you want to animate the transition\n * @param [emit=true] {boolean} whether you want to emit tab change event\n */\n @Method()\n async selectTab(index: number, animate: boolean = true, emit: boolean = true) {\n this.debug('selectTab', index, animate);\n\n await this.initPromise;\n\n const lastIndex = this.activeTabIndex;\n\n if (this.container) {\n await this.container.setActiveTabIndex(index, true, animate);\n }\n\n if (this.toolbar) {\n await this.toolbar.setActiveTab(index, true, animate);\n }\n\n if (emit) {\n this.emitTabChangeEvent(index, lastIndex);\n }\n\n this.activeTabIndex = lastIndex;\n }\n\n @Watch('config')\n async onConfigChange(config: SuperTabsConfig) {\n await this.setConfig(config);\n }\n\n @Listen('resize', { target: 'window', capture: false, passive: true })\n onWindowResize() {\n this.debug('onWindowResize');\n this.toolbar && this.toolbar.setSelectedTab(this.activeTabIndex);\n this.container.reindexTabs();\n }\n\n async componentWillLoad() {\n if (this.config) {\n await this.setConfig(this.config);\n }\n }\n\n componentDidLoad() {\n this.debug('componentDidLoad');\n\n // index children\n this.indexChildren();\n\n // set the selected tab so the toolbar & container are aligned and in sync\n if (this.container) {\n this.container.setActiveTabIndex(this.activeTabIndex, true, false);\n }\n\n if (this.toolbar) {\n this.toolbar.setActiveTab(this.activeTabIndex, true, false);\n }\n\n // listen to `slotchange` event to detect any changes in children\n this.el.shadowRoot!.addEventListener('slotchange', this.onSlotchange.bind(this));\n\n requestAnimationFrame(() => {\n this.initComponent();\n });\n }\n\n private initComponent() {\n if (!this.container) {\n if (++this.initAttempts <= maxInitRetries) {\n requestAnimationFrame(() => {\n this.initComponent();\n });\n return;\n } else {\n this.debug(`container still doesn't exists after ${maxInitRetries} frames`);\n }\n }\n\n if (this.activeTabIndex > 0) {\n if (this.container) {\n this.container.moveContainerByIndex(this.activeTabIndex, false);\n }\n\n if (this.toolbar) {\n this.toolbar.setActiveTab(this.activeTabIndex, true);\n }\n }\n\n this.propagateConfig();\n this.setupEventListeners();\n\n this.initPromiseResolve();\n }\n\n /**\n * Setup event listeners to synchronize child components\n */\n private async setupEventListeners() {\n if (this.container) {\n await this.container.componentOnReady();\n this.el.addEventListener('selectedTabIndexChange', this.onContainerSelectedTabChange.bind(this));\n this.el.addEventListener('activeTabIndexChange', this.onContainerActiveTabChange.bind(this));\n } else {\n this.debug('setupEventListeners: container does not exist');\n }\n\n if (this.toolbar) {\n await this.toolbar.componentOnReady();\n this.el.addEventListener('buttonClick', this.onToolbarButtonClick.bind(this));\n } else {\n this.debug('setupEventListeners: toolbar does not exist');\n }\n }\n\n private async onContainerSelectedTabChange(ev: any) {\n this.debug('onContainerSelectedTabChange called with: ', ev);\n\n if (this.toolbar) {\n await this.toolbar.setSelectedTab(ev.detail);\n }\n }\n\n private emitTabChangeEvent(newIndex: number, oldIndex?: number) {\n if (typeof (newIndex as unknown) !== 'number' || newIndex < 0) {\n return;\n }\n\n if (typeof oldIndex !== 'number' || oldIndex < 0) {\n oldIndex = this.activeTabIndex;\n }\n\n this.tabChange.emit({\n changed: newIndex !== oldIndex,\n index: newIndex,\n });\n }\n\n private onContainerActiveTabChange(ev: any) {\n this.debug('onContainerActiveTabChange', ev);\n const index: number = ev.detail;\n\n this.emitTabChangeEvent(index);\n\n this.activeTabIndex = index;\n\n this.toolbar && this.toolbar.setActiveTab(index, true, true);\n }\n\n private onToolbarButtonClick(ev: any) {\n this.debug('onToolbarButtonClick', ev);\n\n const { index } = ev.detail;\n\n this.container && this.container.setActiveTabIndex(index, true, true);\n\n this.emitTabChangeEvent(index);\n\n this.activeTabIndex = index;\n }\n\n private indexChildren() {\n this.debug('indexChildren');\n\n const container = this.el.querySelector('super-tabs-container');\n const toolbar = this.el.querySelector('super-tabs-toolbar');\n\n if (container && this.container !== container) {\n this.container = container;\n }\n\n if (toolbar && this.toolbar !== toolbar) {\n this.toolbar = toolbar;\n }\n\n this.propagateConfig();\n }\n\n private async onSlotchange() {\n // re-index the child components\n this.indexChildren();\n\n // reselect the current tab to ensure that we're on the correct tab\n this.selectTab(this.activeTabIndex, true, false);\n }\n\n /**\n * Internal method to output values in debug mode.\n */\n private debug(...vals: any[]) {\n debugLog(this._config, 'tabs', vals);\n }\n\n render() {\n // Render 3 slots\n // Top & bottom slots allow the toolbar position to be configurable via slots.\n // The nameless slot is used to hold the `super-tabs-container`.\n return (\n \n \n \n \n \n );\n }\n}\n" }, { "path": "core/src/super-tabs-container/readme.md", "content": "# super-tabs-container\n\n\n\n\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------- | --------- | ------- |\n| `autoScrollTop` | `auto-scroll-top` | Set to true to automatically scroll to the top of the tab when the button is clicked while the tab is already selected. | `boolean` | `false` |\n| `swipeEnabled` | `swipe-enabled` | Enable/disable swiping | `boolean` | `true` |\n\n\n## Events\n\n| Event | Description | Type |\n| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |\n| `activeTabIndexChange` | Emits an event when the active tab changes. An active tab is the tab that the user looking at. This event emitter will not notify you if the user has changed the current active tab. If you need that information, you should use the `tabChange` event emitted by the `super-tabs` element. | `CustomEvent` |\n| `selectedTabIndexChange` | Emits events when the container moves. Selected tab index represents what the user should be seeing. If you receive a decimal as the emitted number, it means that the container is moving between tabs. This number is used for animations, and can be used for high tab customizations. | `CustomEvent` |\n\n\n## Methods\n\n### `scrollToTop() => Promise`\n\nScroll the active tab to the top.\n\n#### Returns\n\nType: `Promise`\n\n\n\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n" }, { "path": "core/src/super-tabs-container/super-tabs-container.component.scss", "content": "@import \"../variables\";\n\n:host {\n display: flex;\n flex-flow: row nowrap;\n min-width: 100%;\n flex: 1 1 auto;\n position: relative;\n box-sizing: border-box;\n width: var(--super-tab-width, $st-width);\n height: var(--super-tab-height, $st-height);\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n touch-action: pan-y;\n user-select: none;\n will-change: scroll-position;\n order: -1;\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-font-smoothing: antialiased;\n}\n" }, { "path": "core/src/super-tabs-container/super-tabs-container.component.tsx", "content": "import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n QueueApi,\n State,\n} from '@stencil/core';\nimport { SuperTabsConfig } from '../interface';\nimport { checkGesture, debugLog, getTs, pointerCoord, scrollEl, STCoord } from '../utils';\n\n@Component({\n tag: 'super-tabs-container',\n styleUrl: 'super-tabs-container.component.scss',\n shadow: true,\n})\nexport class SuperTabsContainerComponent implements ComponentInterface {\n @Element() el!: HTMLSuperTabsContainerElement;\n\n /** @internal */\n @Prop({ mutable: true }) config?: SuperTabsConfig;\n\n /** @internal */\n @Prop({ context: 'queue' }) queue!: QueueApi;\n\n /**\n * Enable/disable swiping\n */\n @Prop() swipeEnabled: boolean = true;\n\n /**\n * Set to true to automatically scroll to the top of the tab when the button is clicked while the tab is\n * already selected.\n */\n @Prop() autoScrollTop: boolean = false;\n\n /**\n * Emits an event when the active tab changes.\n * An active tab is the tab that the user looking at.\n *\n * This event emitter will not notify you if the user has changed the current active tab.\n * If you need that information, you should use the `tabChange` event emitted by the `super-tabs` element.\n */\n @Event() activeTabIndexChange!: EventEmitter;\n\n /**\n * Emits events when the container moves.\n * Selected tab index represents what the user should be seeing.\n * If you receive a decimal as the emitted number, it means that the container is moving between tabs.\n * This number is used for animations, and can be used for high tab customizations.\n */\n @Event() selectedTabIndexChange!: EventEmitter;\n\n @State() tabs: HTMLSuperTabElement[] = [];\n\n private initialCoords: STCoord | undefined;\n private lastPosX: number | undefined;\n private isDragging: boolean = false;\n private initialTimestamp?: number;\n private _activeTabIndex: number | undefined;\n private _selectedTabIndex?: number;\n private leftThreshold: number = 0;\n private rightThreshold: number = 0;\n private scrollWidth: number = 0;\n private slot!: HTMLSlotElement;\n private ready?: boolean;\n private width: number = 0;\n\n async componentDidLoad() {\n this.debug('componentDidLoad');\n this.updateWidth();\n await this.indexTabs();\n this.slot = this.el.shadowRoot!.querySelector('slot') as HTMLSlotElement;\n this.slot.addEventListener('slotchange', this.onSlotChange.bind(this));\n }\n\n private async onSlotChange() {\n this.debug('onSlotChange', this.tabs.length);\n this.updateWidth();\n this.indexTabs();\n }\n\n async componentDidRender() {\n this.updateWidth();\n }\n\n /**\n * @internal\n */\n @Method()\n async reindexTabs() {\n this.updateWidth();\n await this.indexTabs();\n }\n\n /**\n * @internal\n *\n * Moves the container to align with the specified tab index\n * @param index {number} Index of the tab\n * @param animate {boolean} Whether to animate the transition\n */\n @Method()\n moveContainerByIndex(index: number, animate?: boolean): Promise {\n const scrollX = this.indexToPosition(index);\n\n if (scrollX === 0 && index > 0) {\n return Promise.resolve();\n }\n\n return this.moveContainer(scrollX, animate);\n }\n\n /**\n * @internal\n *\n * Sets the scrollLeft property of the container\n * @param scrollX {number}\n * @param animate {boolean}\n */\n @Method()\n moveContainer(scrollX: number, animate?: boolean): Promise {\n if (animate) {\n scrollEl(this.el, scrollX, this.config!.nativeSmoothScroll!, this.config!.transitionDuration);\n } else {\n this.el.scroll(scrollX, 0);\n }\n\n return Promise.resolve();\n }\n\n /** @internal */\n @Method()\n async setActiveTabIndex(index: number, moveContainer: boolean = true, animate: boolean = true): Promise {\n this.debug('setActiveTabIndex', index);\n\n if (this._activeTabIndex === index) {\n if (!this.autoScrollTop) {\n return;\n }\n\n await this.scrollToTop();\n }\n\n if (moveContainer) {\n await this.moveContainerByIndex(index, animate);\n }\n\n await this.updateActiveTabIndex(index, false);\n }\n\n /**\n * Scroll the active tab to the top.\n */\n @Method()\n async scrollToTop() {\n if (this._activeTabIndex === undefined || this.tabs === undefined) {\n this.debug('activeTabIndex or tabs was undefined');\n return;\n }\n\n const current = this.tabs[this._activeTabIndex];\n this.queue.read(() => {\n if (!current) {\n this.debug('Current active tab was undefined in scrollToTop');\n return;\n }\n // deepcode ignore PromiseNotCaughtGeneral: \n current.getRootScrollableEl().then((el) => {\n if (el) {\n scrollEl(el, 0, this.config!.nativeSmoothScroll!, this.config!.transitionDuration);\n }\n });\n });\n }\n\n private updateActiveTabIndex(index: number, emit: boolean = true) {\n this.debug('updateActiveTabIndex', index, emit, this._activeTabIndex);\n\n this._activeTabIndex = index;\n emit && this.activeTabIndexChange.emit(this._activeTabIndex);\n\n this.lazyLoadTabs();\n }\n\n private updateSelectedTabIndex(index: number) {\n if (index === this._selectedTabIndex) {\n return;\n }\n\n this._selectedTabIndex = index;\n this.selectedTabIndexChange.emit(this._selectedTabIndex);\n }\n\n @Listen('touchstart')\n async onTouchStart(ev: TouchEvent) {\n if (!this.swipeEnabled) {\n return;\n }\n\n if (this.config!.avoidElements) {\n let avoid: boolean = false;\n let element: any = ev.target;\n\n if (element) {\n do {\n if (typeof element.getAttribute === 'function' && element.getAttribute('avoid-super-tabs')) {\n return;\n }\n\n element = element.parentElement;\n } while (element && !avoid);\n }\n }\n\n const coords = pointerCoord(ev);\n this.updateWidth();\n const vw = this.width;\n if (coords.x < this.leftThreshold || coords.x > vw - this.rightThreshold) {\n // ignore this gesture, it started in the side menu touch zone\n return;\n }\n\n if (this.config!.shortSwipeDuration! > 0) {\n this.initialTimestamp = getTs();\n }\n\n this.initialCoords = coords;\n this.lastPosX = coords.x;\n }\n\n @Listen('click', { passive: false, capture: true })\n async onClick(ev: TouchEvent) {\n if (this.isDragging) {\n ev.stopImmediatePropagation();\n ev.preventDefault();\n }\n }\n\n @Listen('touchmove', { passive: true, capture: true })\n async onTouchMove(ev: TouchEvent) {\n if (!this.swipeEnabled || !this.initialCoords || typeof this.lastPosX !== 'number') {\n return;\n }\n\n const coords = pointerCoord(ev);\n\n if (!this.isDragging) {\n if (!checkGesture(coords, this.initialCoords, this.config!)) {\n if (Math.abs(coords.y - this.initialCoords.y) > 100) {\n this.initialCoords = void 0;\n this.lastPosX = void 0;\n }\n return;\n }\n\n this.isDragging = true;\n }\n\n // stop anything else from capturing these events, to make sure the content doesn't slide\n if (!this.config!.allowElementScroll) {\n ev.stopImmediatePropagation();\n }\n\n // get delta X\n const deltaX: number = this.lastPosX! - coords.x;\n\n if (deltaX === 0) {\n return;\n }\n\n const scrollX = Math.max(0, Math.min(this.scrollWidth - this.width, this.el.scrollLeft + deltaX));\n\n if (Math.floor(scrollX) === Math.floor(this.el.scrollLeft)) {\n return;\n }\n\n const index = Math.round(this.positionToIndex(scrollX) * 100) / 100;\n this.updateSelectedTabIndex(index);\n\n // update last X value\n this.lastPosX = coords.x;\n\n this.el.scroll(scrollX, 0);\n }\n\n @Listen('touchend', { passive: false, capture: true })\n async onTouchEnd(ev: TouchEvent) {\n if (!this.swipeEnabled || !this.isDragging) {\n return;\n }\n\n const coords = pointerCoord(ev);\n\n const deltaTime: number = getTs() - this.initialTimestamp!;\n const shortSwipe = this.config!.shortSwipeDuration! > 0 && deltaTime <= this.config!.shortSwipeDuration!;\n const shortSwipeDelta = coords.x - this.initialCoords!.x;\n\n let selectedTabIndex = this.calcSelectedTab();\n const expectedTabIndex = Math.round(selectedTabIndex);\n\n if (shortSwipe && expectedTabIndex === this._activeTabIndex) {\n selectedTabIndex += shortSwipeDelta > 0 ? -1 : 1;\n }\n\n selectedTabIndex = this.normalizeSelectedTab(selectedTabIndex);\n this.updateActiveTabIndex(selectedTabIndex);\n this.moveContainerByIndex(selectedTabIndex, true);\n\n this.isDragging = false;\n this.initialCoords = void 0;\n this.lastPosX = void 0;\n }\n\n private updateWidth() {\n const boundingRect = this.el.getBoundingClientRect();\n this.width = Math.round(boundingRect.width * 10000) / 10000;\n }\n\n private async indexTabs() {\n if (this.width === 0) {\n requestAnimationFrame(() => {\n this.updateWidth();\n this.indexTabs();\n });\n return;\n }\n\n const tabs = Array.from(this.el.querySelectorAll('super-tab'));\n\n this.scrollWidth = this.width * tabs.length;\n\n this.debug('indexTab', this.scrollWidth, this.width);\n\n await Promise.all(tabs.map((t) => t.componentOnReady()));\n this.tabs = tabs;\n\n const activeTabIndex = this._activeTabIndex\n\n if (this.ready && typeof activeTabIndex === 'number') {\n this.moveContainerByIndex(activeTabIndex, true);\n this.lazyLoadTabs();\n }\n\n if (this.config) {\n switch (this.config.sideMenu) {\n case 'both':\n this.rightThreshold = this.leftThreshold = this.config.sideMenuThreshold || 0;\n break;\n case 'left':\n this.leftThreshold = this.config.sideMenuThreshold || 0;\n break;\n case 'right':\n this.rightThreshold = this.config.sideMenuThreshold || 0;\n break;\n }\n }\n\n if (activeTabIndex !== undefined) {\n this.moveContainerByIndex(activeTabIndex, false).then(() => {\n this.lazyLoadTabs();\n this.ready = true;\n });\n }\n }\n\n private lazyLoadTabs() {\n if (typeof this._activeTabIndex === 'undefined') {\n this.debug('lazyLoadTabs', 'called when _activeTabIndex is undefined');\n return;\n }\n\n if (!this.config) {\n this.debug('lazyLoadTabs', 'called with no config available');\n return;\n }\n\n const activeTab = this._activeTabIndex;\n const tabs = [...this.tabs];\n\n if (!this.config!.lazyLoad) {\n for (const tab of this.tabs) {\n tab.loaded = true\n tab.visible = true\n }\n return;\n }\n\n const min = activeTab - 1;\n const max = activeTab + 1;\n\n let index = 0;\n\n for (const tab of tabs) {\n tab.visible = index >= min && index <= max;\n\n tab.loaded = tab.visible || (this.config!.unloadWhenInvisible ? false : tab.loaded);\n\n index++;\n }\n this.tabs = tabs;\n }\n\n private calcSelectedTab(): number {\n const scrollX = Math.max(0, Math.min(this.scrollWidth - this.width, this.el.scrollLeft));\n return this.positionToIndex(scrollX);\n }\n\n private positionToIndex(scrollX: number) {\n const tabWidth = this.width;\n return scrollX / tabWidth;\n }\n\n private indexToPosition(tabIndex: number) {\n return Math.round(tabIndex * this.width * 10000) / 10000;\n }\n\n private normalizeSelectedTab(index: number): number {\n const scrollX = Math.max(0, Math.min(this.scrollWidth - this.width, this.indexToPosition(index)));\n return Math.round(scrollX / this.width);\n }\n\n /**\n * Internal method to output values in debug mode.\n */\n private debug(...vals: any[]) {\n debugLog(this.config!, 'container', vals);\n }\n\n render() {\n return ;\n }\n}\n" }, { "path": "core/src/super-tabs-toolbar/readme.md", "content": "# super-tabs-toolbar\n\n\n\n\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |\n| `color` | `color` | Background color. Defaults to `'primary'` | `string \\| undefined` | `'primary'` |\n| `scrollable` | `scrollable` | Whether the toolbar is scrollable. Defaults to `false`. | `boolean` | `false` |\n| `scrollablePadding` | `scrollable-padding` | If scrollable is set to true, there will be an added padding to the left of the buttons. Setting this property to false will remove that padding. The padding is also configurable via a CSS variable. | `boolean` | `true` |\n| `showIndicator` | `show-indicator` | Whether to show the indicator. Defaults to `true` | `boolean` | `true` |\n\n\n## Events\n\n| Event | Description | Type |\n| ------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------- |\n| `buttonClick` | Emits an event when a button is clicked Event data contains the clicked SuperTabButton component | `CustomEvent` |\n\n\n## CSS Custom Properties\n\n| Name | Description |\n| -------------------------------------- | ------------------------------------------------------------------ |\n| `--st-indicator-color` | Indicator color. Defaults to `--ion-color-contrast`. |\n| `--st-indicator-height` | Indicator height. Defaults to `2px`. |\n| `--st-scrollable-toolbar-padding-left` | Left padding when `scrollable` is set to true. Defaults to `52px`. |\n| `--super-tabs-toolbar-background` | Toolbar background color. Defaults to `--ion-color-base`. |\n\n\n## Dependencies\n\n### Depends on\n\n- [super-tab-indicator](../super-tab-indicator)\n\n### Graph\n```mermaid\ngraph TD;\n super-tabs-toolbar --> super-tab-indicator\n style super-tabs-toolbar fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n" }, { "path": "core/src/super-tabs-toolbar/super-tabs-toolbar.component.scss", "content": "@import \"../variables\";\n\n:host {\n /**\n * @prop --super-tabs-toolbar-background: Toolbar background color. Defaults to `--ion-color-base`.\n * @prop --st-scrollable-toolbar-padding-left: Left padding when `scrollable` is set to true. Defaults to `52px`.\n * @prop --st-indicator-height: Indicator height. Defaults to `2px`.\n * @prop --st-indicator-color: Indicator color. Defaults to `--ion-color-contrast`.\n */\n\n flex: 0 1 auto;\n display: block;\n width: 100%;\n transform: translate3d(0, 0, 0);\n position: relative;\n background: var(--super-tabs-toolbar-background, $st-toolbar-background);\n overflow: visible;\n box-sizing: border-box;\n pointer-events: auto;\n touch-action: pan-x;\n z-index: 2;\n order: -1;\n\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n -webkit-text-size-adjust: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n -webkit-font-smoothing: antialiased;\n\n .buttons-container {\n display: flex;\n flex-flow: row nowrap;\n width: 100%;\n transform: translate3d(0, 0, 0);\n overflow: hidden;\n }\n}\n\n:host(:not([no-border])):after {\n left: 0;\n bottom: -8px;\n background-position: left 0 top 0;\n position: absolute;\n width: 100%;\n height: 8px;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAIBAMAAAACWGKkAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMFTEIzJBcOYhQUIwAAAB9JREFUCNdjEIQCBiUoYDCGAgYXKGAIhQKGNChgwAAAorMLKSCkL40AAAAASUVORK5CYII=);\n background-repeat: repeat-x;\n content: '';\n z-index: 3;\n transform: translate3d(0,0,0);\n}\n\n:host([scrollable]) .buttons-container {\n will-change: scroll-position;\n}\n\n:host([scrollable][scrollable-padding]) .buttons-container {\n padding-left: var(--st-scrollable-toolbar-padding-left, $st-scrollable-toolbar-padding-left);\n width: calc(100% - var(--st-scrollable-toolbar-padding-left, $st-scrollable-toolbar-padding-left));\n}\n" }, { "path": "core/src/super-tabs-toolbar/super-tabs-toolbar.component.tsx", "content": "import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { SuperTabsConfig } from '../interface';\nimport { checkGesture, debugLog, getNormalizedScrollX, pointerCoord, scrollEl, STCoord } from '../utils';\n\n\n@Component({\n tag: 'super-tabs-toolbar',\n styleUrl: 'super-tabs-toolbar.component.scss',\n shadow: true,\n})\nexport class SuperTabsToolbarComponent implements ComponentInterface {\n\n @Element() el!: HTMLSuperTabsToolbarElement;\n\n /** @internal */\n @Prop({ mutable: true }) config?: SuperTabsConfig;\n\n /**\n * Whether to show the indicator. Defaults to `true`\n */\n @Prop() showIndicator: boolean = true;\n\n /**\n * Background color. Defaults to `'primary'`\n */\n @Prop() color: string | undefined = 'primary';\n\n /**\n * Whether the toolbar is scrollable. Defaults to `false`.\n */\n @Prop({ reflectToAttr: true }) scrollable: boolean = false;\n\n /**\n * If scrollable is set to true, there will be an added padding\n * to the left of the buttons.\n *\n * Setting this property to false will remove that padding.\n *\n * The padding is also configurable via a CSS variable.\n */\n @Prop({ reflectToAttr: true }) scrollablePadding: boolean = true;\n\n /**\n * Emits an event when a button is clicked\n * Event data contains the clicked SuperTabButton component\n */\n @Event() buttonClick!: EventEmitter;\n\n @State() buttons: HTMLSuperTabButtonElement[] = [];\n\n width!: number;\n offsetLeft!: number;\n\n /**\n * Current indicator position.\n * This value is undefined until the component is fully initialized.\n * @private\n */\n private indicatorPosition: number | undefined;\n\n /**\n * Current indicator width.\n * This value is undefined until the component is fully initialized.\n * @private\n */\n private indicatorWidth: number | undefined;\n\n /**\n * Reference to the current active button\n * @private\n */\n private activeButton?: HTMLSuperTabButtonElement;\n private activeTabIndex: number = 0;\n private indicatorEl: HTMLSuperTabIndicatorElement | undefined;\n private buttonsContainerEl: HTMLDivElement | undefined;\n private initialCoords?: STCoord;\n private lastPosX: number | undefined;\n private touchStartTs: number = 0;\n private lastClickTs: number = 0;\n private isDragging: boolean | undefined;\n private leftThreshold: number = 0;\n private rightThreshold: number = 0;\n private slot!: HTMLSlotElement;\n private hostCls: any = {};\n\n async componentDidLoad() {\n this.setHostCls();\n await this.queryButtons();\n this.slot = this.el.shadowRoot!.querySelector('slot') as HTMLSlotElement;\n this.slot.addEventListener('slotchange', this.onSlotChange.bind(this));\n\n this.updateWidth();\n\n requestAnimationFrame(() => {\n this.setActiveTab(this.activeTabIndex, true, false);\n });\n }\n\n componentWillUpdate() {\n this.debug('componentWillUpdate');\n this.updateThresholds();\n }\n\n componentDidRender() {\n this.updateWidth();\n }\n\n private updateWidth() {\n const cr = this.el.getBoundingClientRect();\n this.width = Math.round(cr.width * 100) / 100;\n this.offsetLeft = cr.left;\n }\n\n /** @internal */\n @Method()\n setActiveTab(index: number, align?: boolean, animate?: boolean): Promise {\n index = Math.max(0, Math.min(Math.round(index), this.buttons.length - 1));\n\n this.debug('setActiveTab', index, align, animate);\n\n this.activeTabIndex = index;\n this.markButtonActive(this.buttons[index]);\n\n if (align) {\n this.alignIndicator(index, animate);\n }\n\n return Promise.resolve();\n }\n\n /** @internal */\n @Method()\n setSelectedTab(index: number, animate?: boolean): Promise {\n this.alignIndicator(index, animate);\n return Promise.resolve();\n }\n\n /** @internal */\n @Method()\n moveContainer(scrollX: number, animate?: boolean): Promise {\n if (!this.buttonsContainerEl) {\n this.debug('moveContainer called before this.buttonsContainerEl was defined');\n return Promise.resolve();\n }\n\n scrollEl(this.buttonsContainerEl, scrollX, this.config!.nativeSmoothScroll!, animate ? this.config!.transitionDuration : 0);\n return Promise.resolve();\n }\n\n private getButtonFromEv(ev: any): HTMLSuperTabButtonElement | undefined {\n let button: HTMLSuperTabButtonElement = ev.target;\n\n const tag = button.tagName.toLowerCase();\n\n if (tag !== 'super-tab-button') {\n if (tag === 'super-tabs-toolbar') {\n return;\n }\n\n button = button.closest('super-tab-button') as HTMLSuperTabButtonElement;\n }\n\n return button;\n }\n\n @Listen('click')\n onClick(ev: any) {\n if (!ev || !ev.target) {\n this.debug('Got a click event with no target!', ev);\n return;\n }\n\n if (Date.now() - this.touchStartTs <= 150) {\n return;\n }\n\n const button = this.getButtonFromEv(ev);\n\n if (!button) {\n return;\n }\n\n this.onButtonClick(button);\n }\n\n private onButtonClick(button: HTMLSuperTabButtonElement) {\n this.lastClickTs = Date.now();\n this.setActiveTab(button.index as number, true, true);\n this.buttonClick.emit(button);\n }\n\n @Listen('touchstart')\n async onTouchStart(ev: TouchEvent) {\n if (!this.scrollable) {\n return;\n }\n\n this.debug('onTouchStart', ev);\n\n const coords = pointerCoord(ev);\n const vw = this.width;\n\n if (coords.x < this.leftThreshold || coords.x > vw - this.rightThreshold) {\n // ignore this gesture, it started in the side menu touch zone\n return;\n }\n\n this.touchStartTs = Date.now();\n this.initialCoords = coords;\n this.lastPosX = coords.x;\n }\n\n @Listen('touchmove', { passive: true, capture: true })\n async onTouchMove(ev: TouchEvent) {\n if (!this.buttonsContainerEl || !this.scrollable || !this.initialCoords || typeof this.lastPosX !== 'number') {\n return;\n }\n\n const coords = pointerCoord(ev);\n\n if (!this.isDragging) {\n const shouldCapture = checkGesture(coords, this.initialCoords!, this.config!);\n\n if (!shouldCapture) {\n if (Math.abs(coords.y - this.initialCoords.y) > 100) {\n this.initialCoords = void 0;\n this.lastPosX = void 0;\n }\n return;\n }\n\n // gesture is good, let's capture all next onTouchMove events\n this.isDragging = true;\n }\n\n if (!this.isDragging) {\n return;\n }\n\n ev.stopImmediatePropagation();\n\n // get delta X\n const deltaX: number = this.lastPosX - coords.x;\n\n if (deltaX === 0) {\n return;\n }\n\n // update last X value\n this.lastPosX = coords.x;\n\n requestAnimationFrame(() => {\n if (!this.isDragging) {\n // when swiping fast; this might run after we're already done scrolling\n // which leads to \"choppy\" animations since this instantly scrolls to location\n return;\n }\n\n // scroll container\n const scrollX = getNormalizedScrollX(this.buttonsContainerEl!, this.buttonsContainerEl!.clientWidth, deltaX);\n\n if (scrollX === this.buttonsContainerEl!.scrollLeft) {\n return;\n }\n\n this.buttonsContainerEl!.scroll(scrollX, 0);\n });\n }\n\n @Listen('touchend', { passive: false, capture: true })\n async onTouchEnd(ev: TouchEvent) {\n if (this.lastClickTs < this.touchStartTs && Date.now() - this.touchStartTs <= 150) {\n const coords = pointerCoord(ev);\n if (Math.abs(coords.x - this.initialCoords?.x!) < this.config?.dragThreshold!) {\n const button = this.getButtonFromEv(ev);\n\n if (!button) {\n return;\n }\n\n this.onButtonClick(button);\n }\n }\n\n this.isDragging = false;\n this.initialCoords = void 0;\n this.lastPosX = void 0;\n }\n\n @Watch('color')\n async onColorUpdate() {\n this.setHostCls();\n }\n\n private setHostCls() {\n const cls: any = {};\n\n if (typeof this.color === 'string' && this.color.trim().length > 0) {\n cls['ion-color-' + this.color.trim()] = true;\n }\n\n this.hostCls = cls;\n }\n\n private async onSlotChange() {\n this.debug('onSlotChange');\n this.updateWidth();\n await this.queryButtons();\n await this.setActiveTab(this.activeTabIndex, true);\n }\n\n private async queryButtons() {\n this.debug('Querying buttons');\n const buttons = Array.from(this.el.querySelectorAll('super-tab-button'));\n await Promise.all(buttons.map(b => b.componentOnReady()));\n\n if (buttons) {\n for (let i = 0; i < buttons.length; i++) {\n const button = buttons[i];\n button.index = i;\n button.scrollableContainer = this.scrollable;\n button.active = this.activeTabIndex === i;\n\n if (button.active) {\n this.activeButton = button;\n }\n }\n }\n\n this.buttons = buttons;\n }\n\n private updateThresholds() {\n if (!this.config) {\n return;\n }\n\n if (this.config!.sideMenu === 'both' || this.config!.sideMenu === 'left') {\n this.leftThreshold = this.config!.sideMenuThreshold!;\n }\n\n if (this.config!.sideMenu === 'both' || this.config!.sideMenu === 'right') {\n this.rightThreshold = this.config!.sideMenuThreshold!;\n }\n }\n\n private markButtonActive(button: HTMLSuperTabButtonElement) {\n if (!button) {\n this.debug('markButtonActive', 'button was undefined!');\n return;\n }\n\n if (this.activeButton) {\n this.activeButton.active = false;\n }\n\n button.active = true;\n this.activeButton = button;\n }\n\n private setButtonsContainerEl(el: HTMLDivElement) {\n if (el) {\n this.buttonsContainerEl = el;\n }\n }\n\n private adjustContainerScroll(animate: boolean) {\n if (!this.buttonsContainerEl) {\n this.debug('adjustContainerScroll called before this.buttonsContainerEl was defined');\n return;\n }\n\n let pos: number;\n\n const ip = this.indicatorPosition!;\n const iw = this.indicatorWidth!;\n const mw = this.buttonsContainerEl.clientWidth;\n const sp = this.buttonsContainerEl.scrollLeft;\n\n const centerDelta = ((mw / 2 - iw / 2));\n\n const a = Math.floor((ip + iw + centerDelta));\n const b = Math.floor((ip - centerDelta));\n const c = Math.floor((mw + sp));\n\n if (a > c) {\n // we need to move the segment container to the left\n pos = ip + iw + centerDelta - mw;\n } else if (b < sp) {\n // we need to move the segment container to the right\n pos = Math.max(ip - centerDelta, 0);\n pos = pos > ip ? ip - mw + iw : pos;\n } else {\n return;\n }\n\n if (!animate) {\n scrollEl(this.buttonsContainerEl, pos!, false, 50);\n } else {\n this.moveContainer(pos!, animate);\n }\n }\n\n /**\n * Align the indicator with the selected button.\n * This will adjust the width and the position of the indicator element.\n * @param index {number} the active tab index\n * @param [animate] {boolean=false} whether to animate the transition\n */\n private async alignIndicator(index: number, animate: boolean = false) {\n if (!this.showIndicator || !this.indicatorEl) {\n return;\n }\n\n this.debug('Aligning indicator', index);\n\n const remainder = index % 1;\n const isDragging = this.isDragging = remainder > 0;\n\n const floor = Math.floor(index), ceil = Math.ceil(index);\n const button = this.buttons[floor];\n\n if (!button) {\n return;\n }\n\n let position = button.offsetLeft;\n let width = button.clientWidth;\n\n if (isDragging && floor !== ceil) {\n const buttonB = this.buttons[ceil];\n\n if (!buttonB) {\n // the scroll position we received is higher than the max possible position\n // this could happen due to bad CSS (by developer or this module)\n // or bad scrolling logic?\n return;\n }\n\n const buttonBPosition = buttonB.offsetLeft;\n const buttonBWidth = buttonB.clientWidth;\n\n position += remainder * (buttonBPosition - position);\n width += remainder * (buttonBWidth - width);\n }\n\n requestAnimationFrame(() => {\n this.indicatorPosition = position;\n this.indicatorWidth = width;\n\n if (this.scrollable) {\n this.adjustContainerScroll(animate || !isDragging);\n }\n\n this.indicatorEl!.style.setProperty('--st-indicator-position-x', this.indicatorPosition + 'px');\n this.indicatorEl!.style.setProperty('--st-indicator-scale-x', String(this.indicatorWidth! / 100));\n this.indicatorEl!.style.setProperty('--st-indicator-transition-duration', this.isDragging ? '0' : `${this.config!.transitionDuration}ms`);\n });\n }\n\n /**\n * Internal method to output values in debug mode.\n */\n private debug(...vals: any[]) {\n debugLog(this.config!, 'toolbar', vals);\n }\n\n render() {\n return (\n \n

this.setButtonsContainerEl(ref)}>\n \n {this.showIndicator &&\n this.indicatorEl = ref}\n toolbarPosition={this.el!.assignedSlot!.name as any}/>}\n

\n \n );\n }\n}\n" }, { "path": "core/src/utils.ts", "content": "import { SuperTabsConfig } from './interface';\n\n\nexport const DEFAULT_CONFIG: SuperTabsConfig = {\n dragThreshold: 20,\n allowElementScroll: false,\n maxDragAngle: 40,\n sideMenuThreshold: 50,\n transitionDuration: 150,\n shortSwipeDuration: 300,\n debug: false,\n avoidElements: false,\n lazyLoad: false,\n unloadWhenInvisible: false,\n};\n\nexport type STCoord = {\n x: number;\n y: number;\n}\n\nexport function pointerCoord(ev: any): STCoord {\n // get X coordinates for either a mouse click\n // or a touch depending on the given event\n if (ev) {\n const changedTouches = ev.changedTouches;\n if (changedTouches && changedTouches.length > 0) {\n const touch = changedTouches[0];\n return { x: touch.clientX, y: touch.clientY };\n }\n if (ev.pageX !== undefined) {\n return { x: ev.pageX, y: ev.pageY };\n }\n }\n return { x: 0, y: 0 };\n}\n\nconst nativeScrollAvailable: boolean = 'scrollBehavior' in document.documentElement.style;\n\nlet _getTs: () => number;\n\nif (window.performance && window.performance.now) {\n _getTs = window.performance.now.bind(window.performance);\n} else {\n _getTs = Date.now.bind(Date);\n}\n\nexport const getTs = _getTs;\n\nexport const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;\n\nfunction getScrollCoord(start: number, dest: number, startTime: number, currentTime: number, duration: number) {\n const time = Math.min(1, (currentTime - startTime) / duration);\n const timeFn = easeInOutCubic(time);\n return Math.ceil((timeFn * (dest - start)) + start);\n}\n\nfunction scroll(el: Element, startX: number, x: number, startTime: number, duration: number) {\n const currentTime = getTs();\n const scrollX = startX === x ? x : getScrollCoord(startX, x, startTime, currentTime, duration);\n\n el.scrollTo(scrollX, 0);\n\n if (currentTime - startTime >= duration) {\n return;\n }\n\n requestAnimationFrame(() => {\n scroll(el, startX, x, startTime, duration);\n });\n}\n\nexport const scrollEl = (el: Element, x: number, native: boolean, duration: number = 300) => {\n if (duration <= 0) {\n requestAnimationFrame(() => {\n el.scrollTo(x, 0);\n });\n return;\n }\n\n if (native && nativeScrollAvailable) {\n el.scrollTo({\n left: x,\n behavior: 'smooth',\n });\n return;\n }\n\n requestAnimationFrame(() => {\n scroll(el, el.scrollLeft, x, getTs(), duration);\n });\n};\n\nexport function checkGesture(newCoords: STCoord, initialCoords: STCoord, config: SuperTabsConfig): boolean {\n if (!initialCoords) {\n return false;\n }\n\n const radians = config.maxDragAngle! * (Math.PI / 180);\n const maxCosine = Math.cos(radians);\n const deltaX = newCoords.x - initialCoords.x;\n const deltaY = newCoords.y - initialCoords.y;\n const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n if (distance >= config.dragThreshold!) {\n // swipe is long enough\n // lets check the angle\n const angle = Math.atan2(deltaY, deltaX);\n const cosine = Math.cos(angle);\n return Math.abs(cosine) > maxCosine;\n }\n\n return false;\n}\n\nexport function getNormalizedScrollX(el: HTMLElement, width: number, delta: number = 0): number {\n return Math.max(0, Math.min(el.scrollWidth - width, el.scrollLeft + delta))\n}\n\nconst debugStyle1 = 'background: linear-gradient(135deg,#4150b2,#f71947); border: 1px solid #9a9a9a; color: #ffffff; border-bottom-left-radius: 2px; border-top-left-radius: 2px; padding: 2px 0 2px 4px;';\nconst debugStyle2 = 'background: #252b3e; border: 1px solid #9a9a9a; border-top-right-radius: 2px; border-bottom-right-radius: 2px; margin-left: -2px; padding: 2px 4px; color: white;';\n\nexport function debugLog(config: SuperTabsConfig, tag: string, vals: any[]) {\n if (!config || !config.debug) {\n return;\n }\n\n // Some gorgeous logging, because apparently I have lots of free time to style console logs and write this comment\n console.log(`%csuper-tabs %c%s`, debugStyle1, debugStyle2, ' '.repeat(10 - tag.length) + tag, ...vals);\n}\n" }, { "path": "core/src/variables.scss", "content": "/**\n * super-tab-button variables\n */\n\n/// @prop - Active color of a toolbar button\n$st-button-base-color-active: #{var(--ion-color-contrast)} !default;\n/// @prop - Inactive color of a toolbar button\n$st-button-base-color-inactive: #{rgba(var(--ion-color-contrast-rgb), 0.7)} !default;\n\n/// @prop - Toolbar button icon size\n$st-button-icon-size: 24px !default;\n/// @prop - Toolbar button inactive color\n$st-button-icon-color-inactive: var(--st-base-color-inactive) !default;\n/// @prop - Toolbar button active color\n$st-button-icon-color-active: var(--st-base-color-active) !default;\n\n$st-button-label-line-height: 14px !default;\n$st-button-label-height: 14px !default;\n$st-button-label-font-size: 14px !default;\n$st-button-label-text-transform: uppercase !default;\n$st-button-label-font-weight: 500 !default;\n$st-button-label-padding-bottom: 16px !default;\n$st-button-label-color-inactive: var(--st-base-color-inactive) !default;\n$st-button-label-color-active: var(--st-base-color-active) !default;\n\n/**\n * super-tab variables\n */\n$st-width: 100vw !default;\n$st-height: 100% !default;\n\n/**\n * super-tab-indicator variables\n */\n$st-indicator-height: 2px !default;\n$st-indicator-color: var(--ion-color-contrast, white) !default;\n\n/**\n * super-tab-toolbar variables\n */\n$st-scrollable-toolbar-padding-left: 52px !default;\n$st-toolbar-background: var(--ion-color-base) !default;\n" }, { "path": "core/stencil.config.ts", "content": "import { angularOutputTarget } from '@stencil/angular-output-target';\nimport { Config } from '@stencil/core';\nimport { reactOutputTarget } from '@stencil/react-output-target';\nimport { sass } from '@stencil/sass';\n\n\nexport const config: Config = {\n\n namespace: 'SuperTabs',\n bundles: [\n { components: ['super-tabs', 'super-tabs-container', 'super-tab'] },\n { components: ['super-tabs-toolbar', 'super-tab-button'] },\n { components: ['super-tab-indicator'] },\n ],\n plugins: [\n sass(),\n ],\n outputTargets: [\n {\n type: 'dist',\n esmLoaderPath: '../loader',\n copy: [{ src: '**/*.scss' }],\n },\n {\n type: 'docs-readme',\n strict: true,\n },\n {\n type: 'dist-hydrate-script',\n },\n angularOutputTarget({\n componentCorePackage: '@ionic-super-tabs/core',\n directivesProxyFile: '../angular/src/directives/proxies.ts',\n directivesUtilsFile: '../angular/src/directives/proxies-utils.ts',\n directivesArrayFile: '../angular/src/directives/proxies-list.txt',\n excludeComponents: [\n 'super-tab-indicator',\n ],\n }),\n reactOutputTarget({\n componentCorePackage: '@ionic-super-tabs/core',\n proxiesFile: '../react/src/components.ts',\n excludeComponents: [\n 'super-tab-indicator',\n ],\n }),\n ],\n validateTypes: true,\n};\n" }, { "path": "core/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"alwaysStrict\": true,\n \"allowSyntheticDefaultImports\": true,\n \"allowUnreachableCode\": false,\n \"declaration\": true,\n \"experimentalDecorators\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"jsx\": \"react\",\n \"jsxFactory\": \"h\",\n \"lib\": [\n \"dom\",\n \"es2017\"\n ],\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"noImplicitAny\": false,\n \"noImplicitReturns\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"outDir\": \".tmp\",\n \"pretty\": true,\n \"removeComments\": false,\n \"target\": \"es2017\"\n },\n \"include\": [\n \"src/**/*.ts\",\n \"src/**/*.tsx\",\n \"stencil.config.ts\"\n ],\n \"exclude\": [\n \"node_modules\"\n ]\n}\n" }, { "path": "doc-pages/configuration.md", "content": "# Configuration\n\nConfiguring ***Super Tabs*** can be done by setting the `config` property on a `` element.\n\nExample:\n```html\n\n\n```\n```ts\n\n ...\n \n config: SuperTabsConfig = {\n sideMenu: 'left',\n shortSwipeDuration: 180,\n };\n```\n\n## Defaults\n```ts\nexport const DEFAULT_CONFIG: SuperTabsConfig = {\n dragThreshold: 10,\n allowElementScroll: false,\n maxDragAngle: 40,\n sideMenuThreshold: 50,\n transitionDuration: 300,\n shortSwipeDuration: 300,\n debug: false,\n avoidElements: false,\n};\n```\n\n## Reference\n```ts\n/**\n * Max drag angle in degrees.\n *\n * Defaults to `40`\n */\n maxDragAngle?: number;\n\n /**\n * Drag threshold in pixels.\n *\n * This value defines how far the user have to swipe for the swipe to be treated as a swipe gesture.\n *\n * Defaults to `20`\n */\n dragThreshold?: number;\n\n /**\n * Allows elements inside tabs to be dragged or scrolled through.\n *\n * Setting this value to `true` will allow touch events to be propagated to child components.\n *\n * Defaults to `false`.\n */\n allowElementScroll?: boolean;\n\n /**\n * Transition duration in milliseconds.\n *\n * This value is used for all transitions and animations.\n *\n * Defaults to `150`.\n */\n transitionDuration?: number;\n\n /**\n * Side menu location.\n *\n * If this value is set to `right` or `left`, the super tabs component will avoid listening to swipe events\n * in the specified region(s) to avoid interfering with a side menu event listeners.\n *\n * Defaults to `undefined`.\n */\n sideMenu?: 'left' | 'right' | 'both';\n\n /**\n * Side menu threshold in pixels.\n *\n * Defaults to `50`.\n */\n sideMenuThreshold?: number;\n\n /**\n * Short swipe duration in milliseconds.\n *\n * Short swipe is when a user quickly swipes between tabs. If the swipe duration is less than or equal to this\n * configured value, then we assume that the user wants to switch tabs.\n * To disable this behaviour set this value to `0`.\n *\n * Defaults to `300`\n */\n shortSwipeDuration?: number;\n\n /**\n * Enable debug mode.\n * Defaults to `false`.\n */\n debug?: boolean;\n\n /**\n * Whether the container should look and avoid elements with avoid-super-tabs attribute\n */\n avoidElements?: boolean;\n```\n" }, { "path": "doc-pages/getting-started/angular.md", "content": "# Getting Started with Angular\n\n## Installation\n\n#### 1. Install the module\n```shell\nnpm i --save @ionic-super-tabs/angular\n```\n#### 2. Import the module\nYou must import `SuperTabsModule.forRoot()` once only. This is usually imported in your app's root module (e.g `AppModule`), \nbut it can be imported in other modules depending on your app structure.\n\nFor lazy loaded app you must also import `SuperTabsModule` to have access to the provided components.\n\n```typescript\nimport { SuperTabsModule } from '@ionic-super-tabs/angular';\n\n// Root module import example\n@NgModule({\n ...\n imports: [\n ...\n SuperTabsModule.forRoot(),\n ],\n ...\n})\nexport class AppModule {}\n\n// Child module import example\n@NgModule({\n ...\n imports: [\n ...\n SuperTabsModule,\n ],\n ...\n})\nexport class HomePageModule {}\n``` \n\n\nSee the [Angular Usage Guide](usage/angular) for examples on how to setup ***Super Tabs***.\n" }, { "path": "doc-pages/home.md", "content": "# Super Tabs\nSwipeable tabs for Ionic apps\n\n## Introduction\n***Super Tabs*** is a set of web components to build swipe-able views in Ionic apps.\n The module was designed based on Material Design Guidelines \n to provide a simple and familiar user experience.\n \n \n## Support\n\n#### Community support\nHaving some trouble? search existing [issues](https://github.com/zyra/ionic-super-tabs/issues) on Github, or [submit a bug report](https://github.com/zyra/ionic-super-tabs/issues/new?assignees=&labels=&template=bug_report.md&title=).\n\n## Contributing\nTo request a feature create a new issue. Pull requests are welcome. \n\nFeatures with minimal impact on performance or complexity have a higher probability of being implemented/merged.\n\n## License\nThis project is licensed under the [MIT License](https://github.com/zyra/ionic-super-tabs/blob/master/LICENSE.md).\n" }, { "path": "doc-pages/usage/angular.md", "content": "# Angular Usage Guide\n\n* [Basic usage](usage/angular/#basic-usage)\n* [Scrollable toolbar](usage/angular/#scrollable-toolbar)\n* [Toolbar positioning](usage/angular/#toolbar-positioning)\n* [Routing](usage/angular/#routing)\n* [Theming](usage/angular/#theming)\n\n## Basic usage\n```html\n\n \n Super Tabs\n \n\n\n\n \n \n \n Page #1 \n \n \n \n Page #2 \n \n \n \n Page #3 \n \n \n \n \n \n Page #1\n \n \n \n \n Page #2\n \n \n \n \n Page #3\n \n \n \n\n```\n\n## Scrollable toolbar\nEnabling toolbar scrolling is recommended if the toolbar gets crowded with many tabs.\n\nTo enable this feature, set the `scrollable` attribute on ``.\n\nExample:\n```html\n\n \n \n \n \n\n```\n\n## Toolbar positioning\nTo position the toolbar below the tabs, set the `slot` attribute to `bottom`.\n\nExample:\n```html\n\n \n \n \n \n\n```\n\n## Routing\nTo use external pages inside a `` you can use `` *(instead of `` in basic usage example)*.\n\nNote that lazy loading is not supported yet, so you must pass the target page as a variable.\n\nExample:\n```html\n\n \n \n \n \n \n \n \n\n``` \n\n```ts\nimport { MyPage } from '../path/to/my.page';\n\n@Component({\n ...\n})\nexport class HomePage {\n myPage = MyPage;\n}\n```\n\n## Theming\nStyling ***Super Tabs*** can be done by setting the available CSS variables. To see the available variables check the \ndocumentation for the specific element.\n\nYou can set variables in your page:\n```scss\n// home.page.scss\n:host { \n --super-tabs-toolbar-background: black;\n --st-indicator-color: yellow;\n}\n```\n\nor in your root variables:\n```scss\n// variables.scss\n:root {\n --st-base-color-inactive: rgba(255, 255, 255, 0.6);\n --st-base-color-active: rgba(255, 255, 255, 0.99);\n}\n```\n" }, { "path": "lerna.json", "content": "{\n \"lerna\": \"2.11.0\",\n \"packages\": [\n \"angular\",\n \"core\",\n \"react\"\n ],\n \"version\": \"7.0.8\"\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"@ionic-super-tabs/source\",\n \"version\": \"0.0.0\",\n \"description\": \"\",\n \"scripts\": {\n \"bootstrap\": \"lerna bootstrap\",\n \"build\": \"lerna run build --concurrency 1\",\n \"test\": \"lerna run test\"\n },\n \"author\": \"Zyra Media Inc. \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"lerna\": \"latest\",\n \"tslint\": \"latest\"\n }\n}\n" }, { "path": "react/.gitignore", "content": "dist\ndist-transpiled\nnode_modules\n" }, { "path": "react/package.json", "content": "{\n \"name\": \"@ionic-super-tabs/react\",\n \"version\": \"7.0.8\",\n \"description\": \"Ionic Super Tabs bindings for React applications\",\n \"author\": \"Zyra Media Inc. \",\n \"license\": \"MIT\",\n \"scripts\": {\n \"build\": \"npm run clean && npm run compile\",\n \"clean\": \"rm -rf dist && rm -rf dist-transpiled\",\n \"compile\": \"npm run tsc && rollup -c\",\n \"tsc\": \"tsc -p .\"\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.esm.js\",\n \"types\": \"dist/types/index.d.ts\",\n \"files\": [\n \"dist/\"\n ],\n \"keywords\": [\n \"ionic\",\n \"swipeable\",\n \"tabs\",\n \"module\",\n \"component\",\n \"react\"\n ],\n \"dependencies\": {\n \"@ionic-super-tabs/core\": \"^7.0.8\",\n \"tslib\": \"*\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^12.12.14\",\n \"@types/react\": \"^16.9.2\",\n \"@types/react-dom\": \"^16.9.0\",\n \"fs-extra\": \"^8.1.0\",\n \"react\": \"^16.9.0\",\n \"react-dom\": \"^16.9.0\",\n \"react-testing-library\": \"^7.0.0\",\n \"rollup\": \"^1.18.0\",\n \"rollup-plugin-node-resolve\": \"^5.2.0\",\n \"rollup-plugin-sourcemaps\": \"^0.4.2\",\n \"rollup-plugin-virtual\": \"^1.0.1\",\n \"typescript\": \"^3.7.2\"\n }\n}\n" }, { "path": "react/rollup.config.js", "content": "// borrowed from https://github.com/ionic-team/ionic/blob/930b271a4abf680b08e6755644cece4b95053f15/packages/react/rollup.config.js\n\nimport resolve from 'rollup-plugin-node-resolve';\nimport sourcemaps from 'rollup-plugin-sourcemaps';\n\nexport default {\n input: 'dist-transpiled/index.js',\n output: [\n {\n file: 'dist/index.esm.js',\n format: 'es',\n sourcemap: true\n },\n {\n file: 'dist/index.js',\n format: 'commonjs',\n preferConst: true,\n sourcemap: true\n }\n ],\n external: (id) => !/^(\\.|\\/)/.test(id),\n plugins: [\n resolve(),\n sourcemaps()\n ]\n};\n" }, { "path": "react/src/components.ts", "content": "/* eslint-disable */\n/* tslint:disable */\n/* auto-generated react proxies */\nimport { createReactComponent } from './react-component-lib';\n\nimport { JSX } from '@ionic-super-tabs/core';\n\nimport { defineCustomElements, applyPolyfills } from '@ionic-super-tabs/core/loader';\n\napplyPolyfills().then(() => defineCustomElements());\nexport const SuperTab = /*@__PURE__*/createReactComponent('super-tab');\nexport const SuperTabButton = /*@__PURE__*/createReactComponent('super-tab-button');\nexport const SuperTabs = /*@__PURE__*/createReactComponent('super-tabs');\nexport const SuperTabsContainer = /*@__PURE__*/createReactComponent('super-tabs-container');\nexport const SuperTabsToolbar = /*@__PURE__*/createReactComponent('super-tabs-toolbar');\n" }, { "path": "react/src/index.ts", "content": "export * from './components';\n" }, { "path": "react/src/react-component-lib/createComponent.tsx", "content": "import React from 'react';\n\nimport {\n attachEventProps,\n createForwardRef,\n dashToPascalCase,\n isCoveredByReact,\n} from './utils/index';\n\ninterface IonicReactInternalProps extends React.HTMLAttributes {\n forwardedRef?: React.Ref;\n ref?: React.Ref;\n}\n\nexport const createReactComponent = (tagName: string) => {\n const displayName = dashToPascalCase(tagName);\n const ReactComponent = class extends React.Component> {\n \n private ref: React.RefObject;\n \n constructor(props: IonicReactInternalProps) {\n super(props);\n this.ref = React.createRef();\n }\n\n componentDidMount() {\n this.componentDidUpdate(this.props);\n }\n\n componentDidUpdate(prevProps: IonicReactInternalProps) {\n const node = this.ref.current;\n attachEventProps(node, this.props, prevProps);\n }\n\n render() {\n const { children, forwardedRef, style, className, ref, ...cProps } = this.props;\n\n const propsToPass = Object.keys(cProps).reduce((acc, name) => {\n const isEventProp = name.indexOf('on') === 0 && name[2] === name[2].toUpperCase();\n const isDataProp = name.indexOf('data-') === 0;\n const isAriaProp = name.indexOf('aria-') === 0;\n\n if (isEventProp) {\n const eventName = name.substring(2).toLowerCase();\n if (typeof document !== \"undefined\" && isCoveredByReact(eventName)) {\n (acc as any)[name] = (cProps as any)[name];\n }\n } else if (isDataProp || isAriaProp) {\n (acc as any)[name] = (cProps as any)[name];\n }\n return acc;\n }, {});\n\n const newProps: any = {\n ...propsToPass,\n ref: this.ref,\n style,\n className,\n };\n\n return React.createElement(tagName, newProps, children);\n }\n\n static get displayName() {\n return displayName;\n }\n };\n return createForwardRef(ReactComponent, displayName);\n};\n" }, { "path": "react/src/react-component-lib/createControllerComponent.tsx", "content": "import React from 'react';\nimport { attachEventProps } from './utils/attachEventProps';\n\ninterface LoadingElement {\n present: () => any;\n dismiss: () => any;\n}\n\ninterface ReactControllerProps {\n isOpen: boolean;\n onDidDismiss: (event: CustomEvent) => void;\n}\n\nexport function createControllerComponent<\n OptionsType extends object,\n LoadingElementType extends LoadingElement,\n OverlayEventDetail\n>(displayName: string, controller: { create: (options: any) => Promise }) {\n const dismissEventName = `on${displayName}DidDismiss`;\n\n type Props = OptionsType & ReactControllerProps;\n\n return class ReactControllerComponent extends React.Component {\n controller?: LoadingElementType;\n\n constructor(props: Props) {\n super(props);\n }\n\n static get displayName() {\n return displayName;\n }\n\n async componentDidMount() {\n const { isOpen } = this.props;\n if (isOpen) {\n this.present();\n }\n }\n\n async componentDidUpdate(prevProps: Props) {\n if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n this.present(prevProps);\n }\n if (\n this.controller &&\n prevProps.isOpen !== this.props.isOpen &&\n this.props.isOpen === false\n ) {\n await this.controller.dismiss();\n }\n }\n\n async present(prevProps?: Props) {\n const { isOpen, onDidDismiss, ...cProps } = this.props;\n const elementProps = {\n ...cProps,\n [dismissEventName]: onDidDismiss,\n };\n this.controller = await controller.create({\n ...elementProps,\n });\n attachEventProps(this.controller as any, elementProps, prevProps);\n this.controller.present();\n }\n\n render(): null {\n return null;\n }\n };\n}\n" }, { "path": "react/src/react-component-lib/createOverlayComponent.tsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { attachEventProps } from './utils/attachEventProps';\n\ninterface LoadingElement {\n present: () => any;\n dismiss: () => any;\n}\ninterface ReactOverlayProps {\n children?: React.ReactNode;\n isOpen: boolean;\n onDidDismiss?: (event: CustomEvent) => void;\n}\n\nexport function createOverlayComponent<\n T extends object,\n LoadingElementType extends LoadingElement,\n OverlayEventDetail\n>(displayName: string, controller: { create: (options: any) => Promise }) {\n const dismissEventName = `on${displayName}DidDismiss`;\n\n type Props = T & ReactOverlayProps;\n\n return class ReactOverlayComponent extends React.Component {\n controller?: LoadingElementType;\n el: HTMLDivElement;\n\n constructor(props: Props) {\n super(props);\n this.el = document.createElement('div');\n }\n\n static get displayName() {\n return displayName;\n }\n\n componentDidMount() {\n if (this.props.isOpen) {\n this.present();\n }\n }\n\n async componentDidUpdate(prevProps: Props) {\n if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n this.present(prevProps);\n }\n if (\n this.controller &&\n prevProps.isOpen !== this.props.isOpen &&\n this.props.isOpen === false\n ) {\n await this.controller.dismiss();\n }\n }\n\n async present(prevProps?: Props) {\n // tslint:disable-next-line:no-empty\n const { children, isOpen, onDidDismiss = () => {}, ...cProps } = this.props;\n const elementProps = {\n ...cProps,\n [dismissEventName]: onDidDismiss,\n };\n\n this.controller = await controller.create({\n ...elementProps,\n component: this.el,\n componentProps: {},\n });\n\n attachEventProps(this.controller as any, elementProps, prevProps);\n\n this.controller.present();\n }\n\n render() {\n return ReactDOM.createPortal(this.props.children, this.el);\n }\n };\n}\n" }, { "path": "react/src/react-component-lib/index.ts", "content": "export { createReactComponent } from './createComponent';\nexport { createControllerComponent } from './createControllerComponent';\nexport { createOverlayComponent } from './createOverlayComponent';\n" }, { "path": "react/src/react-component-lib/utils/attachEventProps.ts", "content": "export function attachEventProps(node: HTMLElement, newProps: any, oldProps: any = {}) {\n const className = getClassName(node.classList, newProps, oldProps);\n if (className) {\n node.className = className;\n }\n\n Object.keys(newProps).forEach(name => {\n if (name === 'children' || name === 'style' || name === 'ref' || name === 'className') {\n return;\n }\n if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n const eventName = name.substring(2);\n const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);\n\n if (!isCoveredByReact(eventNameLc)) {\n syncEvent(node, eventNameLc, newProps[name]);\n }\n } else {\n (node as any)[name] = newProps[name];\n }\n });\n}\n\nexport function getClassName(classList: DOMTokenList, newProps: any, oldProps: any) {\n // map the classes to Maps for performance\n const currentClasses = arrayToMap(classList);\n const incomingPropClasses = arrayToMap(newProps.className ? newProps.className.split(' ') : []);\n const oldPropClasses = arrayToMap(oldProps.className ? oldProps.className.split(' ') : []);\n const finalClassNames: string[] = [];\n // loop through each of the current classes on the component\n // to see if it should be a part of the classNames added\n currentClasses.forEach(currentClass => {\n if (incomingPropClasses.has(currentClass)) {\n // add it as its already included in classnames coming in from newProps\n finalClassNames.push(currentClass);\n incomingPropClasses.delete(currentClass);\n } else if (!oldPropClasses.has(currentClass)) {\n // add it as it has NOT been removed by user\n finalClassNames.push(currentClass);\n }\n });\n incomingPropClasses.forEach(s => finalClassNames.push(s));\n return finalClassNames.join(' ');\n}\n\n/**\n * Checks if an event is supported in the current execution environment.\n * @license Modernizr 3.0.0pre (Custom Build) | MIT\n */\nexport function isCoveredByReact(eventNameSuffix: string, doc: Document = document) {\n const eventName = 'on' + eventNameSuffix;\n let isSupported = eventName in doc;\n\n if (!isSupported) {\n const element = doc.createElement('div');\n element.setAttribute(eventName, 'return;');\n isSupported = typeof (element as any)[eventName] === 'function';\n }\n\n return isSupported;\n}\n\nexport function syncEvent(node: Element, eventName: string, newEventHandler: (e: Event) => any) {\n const eventStore = (node as any).__events || ((node as any).__events = {});\n const oldEventHandler = eventStore[eventName];\n\n // Remove old listener so they don't double up.\n if (oldEventHandler) {\n node.removeEventListener(eventName, oldEventHandler);\n }\n\n if (newEventHandler != null) {\n // Bind new listener.\n node.addEventListener(\n eventName,\n (eventStore[eventName] = function handler(e: Event) {\n newEventHandler.call(this, e);\n }),\n );\n }\n}\n\nfunction arrayToMap(arr: string[] | DOMTokenList) {\n const map = new Map();\n (arr as string[]).forEach((s: string) => map.set(s, s));\n return map;\n}\n" }, { "path": "react/src/react-component-lib/utils/index.tsx", "content": "import React from 'react';\n\nexport const dashToPascalCase = (str: string) =>\n str\n .toLowerCase()\n .split('-')\n .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))\n .join('');\n\nexport interface ReactProps {\n class?: string;\n}\n\nexport type IonicReactExternalProps = PropType & React.HTMLAttributes & ReactProps;\n\nexport const createForwardRef = (\n ReactComponent: any,\n displayName: string,\n) => {\n const forwardRef = (\n props: IonicReactExternalProps,\n ref: React.Ref,\n ) => {\n return ;\n };\n forwardRef.displayName = displayName;\n\n return React.forwardRef(forwardRef);\n};\n\nexport * from './attachEventProps';\n" }, { "path": "react/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": false,\n \"allowUnreachableCode\": false,\n \"allowSyntheticDefaultImports\": true,\n \"declaration\": true,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"esModuleInterop\": true,\n \"lib\": [\"dom\", \"es2015\"],\n \"importHelpers\": true,\n \"module\": \"es2015\",\n \"moduleResolution\": \"node\",\n \"noImplicitAny\": true,\n \"noImplicitReturns\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"outDir\": \"dist-transpiled\",\n \"declarationDir\": \"dist/types\",\n \"removeComments\": false,\n \"inlineSources\": true,\n \"sourceMap\": true,\n \"jsx\": \"react\",\n \"target\": \"es2017\"\n },\n \"include\": [\n \"src/**/*.ts\",\n \"src/**/*.tsx\"\n ],\n \"compileOnSave\": false,\n \"buildOnSave\": false\n}\n" }, { "path": "super-tabs.sh", "content": "#!/bin/bash\n\nDIR=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" >/dev/null 2>&1 && pwd)\"\nWORK_DIR=${TMP:-$DIR}\nWS_DIR=\"${WORK_DIR}/.super-tabs-tmp\"\nEXAMPLE_PROJECT_DIR_DEFAULT=\"$(cd \"${DIR}/../\" >/dev/null 2>&1 && pwd)/ionic-super-tabs-example\"\nEXAMPLE_PROJECT_DIR=${EXAMPLE_PROJECT_DIR:-${EXAMPLE_PROJECT_DIR_DEFAULT}}\n\ntrap '_cleanWorkspace' EXIT\ntrap 'exit' SIGINT SIGTERM\n\ndeclare -a _cmd_setup=(\"setup\" \"Installs node modules for all packages\")\ndeclare -a _cmd_build=(\"build\" \"Builds core and angular projects\" '--only ')\ndeclare -a _cmd_copy=(\"copy\" \"Copies built packages as NPM modules to \\`${EXAMPLE_PROJECT_DIR}\\`\")\ndeclare -a _cmd_dev=(\"dev\" 'Runs build and then copy')\ndeclare -a _cmd_publish=(\"publish\" 'Runs build and publishes package to npm' '--npm-args ')\n\n_formatArgs() {\n _args=$(printf \"%s\" \"$2\")\n for arg in \"${@:3}\"; do\n _args=$(printf \"%s\\n\\t\\t\\e[37m%s\\e[0m\" \"${_args}\" \"${arg}\")\n done\n printf \"%s\" \"${_args}\"\n}\n\n_printUsage() {\n declare -a args=(\n \"$(basename \"${0}\")\"\n \"${_cmd_setup[0]}\" \"$(_formatArgs \"${_cmd_setup[@]}\")\"\n \"${_cmd_build[0]}\" \"$(_formatArgs \"${_cmd_build[@]}\")\"\n \"${_cmd_copy[0]}\" \"$(_formatArgs \"${_cmd_copy[@]}\")\"\n \"${_cmd_dev[0]}\" \"$(_formatArgs \"${_cmd_dev[@]}\")\"\n \"${_cmd_publish[0]}\" \"$(_formatArgs \"${_cmd_publish[@]}\")\"\n )\n\n printf \"\\e[1m\\e[94m................................................................\n.............. ...................\n.............. Ionic Super Tabs Helper ...................\n.............. ...................\n................................................................\n\\e[0m\n\n\\e[1m\\e[36mUsage\\e[0m: %s [options]\n\n\\e[1m\\e[36mCommands:\\e[0m\n* \\e[1m%10s:\\e[0m %s\n* \\e[1m%10s:\\e[0m %s\n* \\e[1m%10s:\\e[0m %s\n* \\e[1m%10s:\\e[0m %s\n* \\e[1m%10s:\\e[0m %s\n\" \"${args[@]}\"\n}\n\nerrExit() {\n echo -e \"\\e[1m\\e[91m${*}\\e[0m\"\n exit 1\n}\n\n_exec() {\n# s=$(date +%s%N | cut -b1-13)\n \"$@\" || errExit \"Failed to execute command\"\n# e=$(date +%s%N | cut -b1-13)\n# d=$((e - s))\n# _logv \"executed ${*} in ${d}ms\"\n}\n\n_execSilent() {\n \"$@\" &>/dev/null\n}\n\n_setupWorkspace() {\n _execSilent cd \"${DIR}\"\n _cleanWorkspace\n mkdir -p \"${WS_DIR}\" >/dev/null || errExit 'unable to setup workspace'\n}\n\n_cleanWorkspace() {\n if [ -d \"${WS_DIR}\" ]; then\n rm -rf \"${WS_DIR}\" >/dev/null || errExit 'unable to clean workspace'\n fi\n}\n\n_logv() {\n echo -e \"\\e[33m${*}\\e[0m\"\n}\n\n_log() {\n echo -e \"\\e[36m${*}\\e[0m\"\n}\n\n_build() {\n local _only\n\n for ((i = 1; i <= $#; i++)); do\n case \"${!i}\" in\n \"--only\")\n local _next=\"$((i + 1))\"\n _only=\"${!_next}\"\n ;;\n esac\n done\n\n case \"${_only}\" in\n \"angular\")\n _log \"Building angular module\"\n _exec npx lerna run build --scope=@ionic-super-tabs/angular --stream --no-progress --loglevel=silent\n ;;\n\n \"core\")\n _log \"Building core module\"\n _exec npx lerna run build --scope=@ionic-super-tabs/core --stream --no-progress --loglevel=silent\n ;;\n\n \"react\")\n _log \"Building react module\"\n _exec npx lerna run build --scope=@ionic-super-tabs/react --stream --no-progress --loglevel=silent\n ;;\n\n *)\n _log \"Building all modules\"\n _exec npx lerna run build --concurrency=1 --stream --no-progress --loglevel=silent\n ;;\n esac\n}\n\n_copy() {\n if [ ! -d \"${EXAMPLE_PROJECT_DIR}\" ]; then\n errExit \"Example project does not exists in ${EXAMPLE_PROJECT_DIR}\"\n fi\n\n _log \"Copying built modules to example app\"\n cd core || exit 1\n\n _logv \"Packing core...\"\n core_tgz=$(npm pack 2>&1 | tail -1)\n mv \"${core_tgz}\" \"${WS_DIR}\"\n cd ../angular/dist || exit 1\n\n _logv \"Packing angular...\"\n ng_tgz=$(npm pack 2>&1 | tail -1)\n mv \"${ng_tgz}\" \"${WS_DIR}\"\n cd ../../\n\n local extractDest=\"${EXAMPLE_PROJECT_DIR}/node_modules/@ionic-super-tabs/\"\n _logv \"Extracting packages to ${extractDest}\"\n\n tar xf \"${WS_DIR}/${core_tgz}\" -C \"${extractDest}\"\n cp -a \"${extractDest}package/.\" \"${extractDest}/core/\"\n rm -rf \"${extractDest}package\"\n\n tar xf \"${WS_DIR}/${ng_tgz}\" -C \"${extractDest}\"\n cp -a \"${extractDest}package/.\" \"${extractDest}/angular/\"\n rm -rf \"${extractDest}package\"\n\n _log \"Good luck!\"\n}\n\n_publish() {\n _log \"Publishing all packages to npm\"\n cd \"${DIR}/core\" || exit 1\n npm publish --access public || exit 1\n cd \"${DIR}/angular/dist\" || exit 1\n npm publish --access public || exit 1\n cd \"${DIR}/react\" || exit 1\n npm publish --access public || exit 1\n}\n\n_setupWorkspace\n\ncase $1 in\n\"setup\")\n _exec npx lerna bootstrap\n ;;\n\n\"build\")\n _build \"${@:2}\"\n ;;\n\n\"copy\")\n _copy \"${@:2}\"\n ;;\n\n\"dev\")\n _build --only core\n _build --only angular\n _copy\n ;;\n\n\"publish\")\n _publish \"${@:2}\"\n ;;\n\n\"docs\")\n find \"${DIR}/core/src\" -type f -name '*.md' | awk 'match($0, /([a-z-]+)\\/readme.md/,m) { print m[1] }' | xargs -I@ cp \"${DIR}/core/src/@/readme.md\" \"${DIR}/docs/@.md\"\n ;;\n\n\"exec\")\n cd \"${DIR}\" && _exec \"${@:2}\"\n ;;\n*)\n _printUsage\n ;;\nesac\n" } ]