@rdlabo/ionic-theme-md3 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './transition/md.transition';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './transition/md.transition';

package/dist/transition/index.d.ts

@@ -0,0 +1,13 @@
+import type { Animation, NavOptions } from '@ionic/core';
+export declare const getIonPageElement: (element: HTMLElement) => Element;
+export interface TransitionOptions extends NavOptions {
+    progressCallback?: (ani: Animation | undefined) => void;
+    baseEl: any;
+    enteringEl: HTMLElement;
+    leavingEl: HTMLElement | undefined;
+}
+export interface TransitionResult {
+    hasCompleted: boolean;
+    animation?: Animation;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/transition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/transition/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzD,eAAO,MAAM,iBAAiB,GAAI,SAAS,WAAW,YAWrD,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}

package/dist/transition/index.js

@@ -0,0 +1,10 @@
+export const getIonPageElement = (element) => {
+    if (element.classList.contains('ion-page')) {
+        return element;
+    }
+    const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
+    if (ionPage) {
+        return ionPage;
+    }
+    return element;
+};

package/dist/transition/md.transition.d.ts

@@ -0,0 +1,4 @@
+import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
+import type { TransitionOptions } from './index';
+export declare const mdTransitionAnimation: (_: HTMLElement, opts: TransitionOptions) => Animation;
+//# sourceMappingURL=md.transition.d.ts.map

package/dist/transition/md.transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"md.transition.d.ts","sourceRoot":"","sources":["../../src/transition/md.transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4DAA4D,CAAC;AAE5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,eAAO,MAAM,qBAAqB,GAAI,GAAG,WAAW,EAAE,MAAM,iBAAiB,KAAG,SAwE/E,CAAC"}

package/dist/transition/md.transition.js

@@ -0,0 +1,63 @@
+import { createAnimation } from '@ionic/core';
+import { getIonPageElement } from './index';
+export const mdTransitionAnimation = (_, opts) => {
+    const OFF_BOTTOM = 40;
+    const CENTER = 0;
+    const backDirection = opts.direction === 'back';
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const ionPageElement = getIonPageElement(enteringEl);
+    const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
+    const rootTransition = createAnimation();
+    rootTransition.addElement(ionPageElement).fill('both').beforeRemoveClass('ion-page-invisible');
+    if (backDirection) {
+        rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
+    }
+    else {
+        rootTransition
+            .duration((opts.duration ?? 0) || 280)
+            .easing('cubic-bezier(0.36,0.66,0.04,1)')
+            .fromTo('transform', `translateX(${OFF_BOTTOM}px)`, `translateX(${CENTER}px)`)
+            .fromTo('opacity', 0.01, 1);
+    }
+    if (enteringToolbarEle) {
+        const enteringToolBar = createAnimation();
+        enteringToolBar.addElement(enteringToolbarEle);
+        rootTransition.addAnimation(enteringToolBar);
+    }
+    if (leavingEl) {
+        const stackedTransition = createAnimation();
+        const stackedElement = getIonPageElement(leavingEl);
+        const stackedAnimationElement = stackedElement.querySelectorAll('ion-toolbar, ion-content > *');
+        if (!backDirection) {
+            stackedTransition.addElement(stackedAnimationElement);
+            stackedTransition
+                .duration((opts.duration ?? 0) || 280)
+                .easing('cubic-bezier(0.36,0.66,0.04,1)')
+                .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_BOTTOM * -1}px)`);
+        }
+        else if (backDirection) {
+            stackedTransition.addElement(ionPageElement);
+            stackedTransition
+                .duration((opts.duration ?? 0) || 200)
+                .easing('cubic-bezier(0.36,0.66,0.04,1)')
+                .fromTo('transform', `translateX(${OFF_BOTTOM * -1}px)`, `translateX(${CENTER}px)`);
+        }
+        rootTransition.addAnimation(stackedTransition);
+    }
+    if (leavingEl && backDirection) {
+        rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
+        const leavingPage = createAnimation();
+        leavingPage
+            .addElement(getIonPageElement(leavingEl))
+            .onFinish((currentStep) => {
+            if (currentStep === 1 && leavingPage.elements.length > 0) {
+                leavingPage.elements[0].style.setProperty('display', 'none');
+            }
+        })
+            .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_BOTTOM}px)`)
+            .fromTo('opacity', 1, 0);
+        rootTransition.addAnimation(leavingPage);
+    }
+    return rootTransition;
+};

package/package.json

@@ -1,14 +1,27 @@
 {
   "name": "@rdlabo/ionic-theme-md3",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Material Design 3 Theme for Ionic Framework",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/css/*": "./dist/css/*",
+    "./src/styles/*": "./src/styles/*"
+  },
   "files": [
     "dist",
     "src",
     "package.json"
   ],
   "scripts": {
-    "build": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build": "npm run build:css && npm run build:ts",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build:ts": "tsc",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
     "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",

package/src/focus-controller/index.ts

@@ -1,123 +0,0 @@
-import { config } from '../utils';
-// import { printIonWarning} from '@ionic/core/dist/types/utils/logging';
-
-/**
- * Moves focus to a specified element. Note that we do not remove the tabindex
- * because that can result in an unintentional blur. Non-focusables can't be
- * focused, so the body will get focused again.
- */
-const moveFocus = (el: HTMLElement) => {
-  el.tabIndex = -1;
-  el.focus();
-};
-
-/**
- * Elements that are hidden using `display: none` should not be focused even if
- * they are present in the DOM.
- */
-const isVisible = (el: HTMLElement) => {
-  return el.offsetParent !== null;
-};
-
-/**
- * The focus controller allows us to manage focus within a view so assistive
- * technologies can inform users of changes to the navigation state. Traditional
- * native apps have a way of informing assistive technology about a navigation
- * state change. Mobile browsers have this too, but only when doing a full page
- * load. In a single page app we do not do that, so we need to build this
- * integration ourselves.
- */
-export const createFocusController = (): FocusController => {
-  const saveViewFocus = (referenceEl?: HTMLElement) => {
-    const focusManagerEnabled = config.get('focusManagerPriority', false);
-
-    /**
-     * When going back to a previously visited page focus should typically be moved
-     * back to the element that was last focused when the user was on this view.
-     */
-    if (focusManagerEnabled) {
-      const activeEl = document.activeElement;
-      if (activeEl !== null && referenceEl?.contains(activeEl)) {
-        activeEl.setAttribute(LAST_FOCUS, 'true');
-      }
-    }
-  };
-
-  const setViewFocus = (referenceEl: HTMLElement) => {
-    const focusManagerPriorities = config.get('focusManagerPriority', false);
-    /**
-     * If the focused element is a descendant of the referenceEl then it's possible
-     * that the app developer manually moved focus, so we do not want to override that.
-     * This can happen with inputs the are focused when a view transitions in.
-     */
-    if (Array.isArray(focusManagerPriorities) && !referenceEl.contains(document.activeElement)) {
-      /**
-       * When going back to a previously visited view focus should always be moved back
-       * to the element that the user was last focused on when they were on this view.
-       */
-      const lastFocus = referenceEl.querySelector<HTMLElement>(`[${LAST_FOCUS}]`);
-      if (lastFocus && isVisible(lastFocus)) {
-        moveFocus(lastFocus);
-        return;
-      }
-
-      for (const priority of focusManagerPriorities) {
-        /**
-         * For each recognized case (excluding the default case) make sure to return
-         * so that the fallback focus behavior does not run.
-         *
-         * We intentionally query for specific roles/semantic elements so that the
-         * transition manager can work with both Ionic and non-Ionic UI components.
-         *
-         * If new selectors are added, be sure to remove the outline ring by adding
-         * new selectors to rule in core.scss.
-         */
-        switch (priority) {
-          case 'content':
-            const content = referenceEl.querySelector<HTMLElement>('main, [role="main"]');
-            if (content && isVisible(content)) {
-              moveFocus(content);
-              return;
-            }
-            break;
-          case 'heading':
-            const headingOne = referenceEl.querySelector<HTMLElement>('h1, [role="heading"][aria-level="1"]');
-            if (headingOne && isVisible(headingOne)) {
-              moveFocus(headingOne);
-              return;
-            }
-            break;
-          case 'banner':
-            const header = referenceEl.querySelector<HTMLElement>('header, [role="banner"]');
-            if (header && isVisible(header)) {
-              moveFocus(header);
-              return;
-            }
-            break;
-          default:
-            // printIonWarning(`Unrecognized focus manager priority value ${priority}`);
-            break;
-        }
-      }
-
-      /**
-       * If there is nothing to focus then focus the page so focus at least moves to
-       * the correct view. The browser will then determine where within the page to
-       * move focus to.
-       */
-      moveFocus(referenceEl);
-    }
-  };
-
-  return {
-    saveViewFocus,
-    setViewFocus,
-  };
-};
-
-export type FocusController = {
-  saveViewFocus: (referenceEl?: HTMLElement) => void;
-  setViewFocus: (referenceEl: HTMLElement) => void;
-};
-
-const LAST_FOCUS = 'ion-last-focus';