@ionic/core 8.2.8-dev.11725551009.1bc973e7 → 8.2.8-dev.11725551706.17fc02b4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.8-dev.11725551009.1bc973e7",
+  "version": "8.2.8-dev.11725551706.17fc02b4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,6 +31,7 @@
     "loader/"
   ],
   "dependencies": {
+    "@phosphor-icons/core": "^2.1.1",
     "@stencil/core": "^4.19.2",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
@@ -44,15 +45,15 @@
     "@clack/prompts": "^0.7.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.45.3",
+    "@playwright/test": "^1.46.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "^0.6.0",
     "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.9",
     "@types/jest": "^29.5.6",
-    "@types/node": "^14.6.0",
+    "@types/node": "^18.19.47",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "chalk": "^5.3.0",
@@ -65,18 +66,20 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "prettier": "^2.6.1",
+    "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
+    "style-dictionary": "^3.9.2",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
+    "build.tokens": "node ./scripts/tokens/index.js && npm run lint.fix && npm run prettier.tokens",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",
@@ -88,7 +91,8 @@
     "lint.ts": "npm run eslint",
     "lint.ts.fix": "npm run eslint -- --fix",
     "prerender.e2e": "node scripts/testing/prerender.js",
-    "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
+    "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"",
+    "prettier.tokens": "prettier \"./src/foundations/*.{scss, html}\" --write --cache",
     "start": "npm run build.css && stencil build --dev --watch --serve",
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",

package/components/index9.js

@@ -1,167 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { d as doc } from './index5.js';
-import { p as pointerCoord } from './helpers.js';
-
-const startTapClick = (config) => {
-    if (doc === undefined) {
-        return;
-    }
-    let lastActivated = 0;
-    let activatableEle;
-    let activeRipple;
-    let activeDefer;
-    const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
-    const clearDefers = new WeakMap();
-    const cancelActive = () => {
-        if (activeDefer)
-            clearTimeout(activeDefer);
-        activeDefer = undefined;
-        if (activatableEle) {
-            removeActivated(false);
-            activatableEle = undefined;
-        }
-    };
-    const pointerDown = (ev) => {
-        // Ignore right clicks
-        if (activatableEle || ev.button === 2) {
-            return;
-        }
-        setActivatedElement(getActivatableTarget(ev), ev);
-    };
-    const pointerUp = (ev) => {
-        setActivatedElement(undefined, ev);
-    };
-    const setActivatedElement = (el, ev) => {
-        // do nothing
-        if (el && el === activatableEle) {
-            return;
-        }
-        if (activeDefer)
-            clearTimeout(activeDefer);
-        activeDefer = undefined;
-        const { x, y } = pointerCoord(ev);
-        // deactivate selected
-        if (activatableEle) {
-            if (clearDefers.has(activatableEle)) {
-                throw new Error('internal error');
-            }
-            if (!activatableEle.classList.contains(ACTIVATED)) {
-                addActivated(activatableEle, x, y);
-            }
-            removeActivated(true);
-        }
-        // activate
-        if (el) {
-            const deferId = clearDefers.get(el);
-            if (deferId) {
-                clearTimeout(deferId);
-                clearDefers.delete(el);
-            }
-            el.classList.remove(ACTIVATED);
-            const callback = () => {
-                addActivated(el, x, y);
-                activeDefer = undefined;
-            };
-            if (isInstant(el)) {
-                callback();
-            }
-            else {
-                activeDefer = setTimeout(callback, ADD_ACTIVATED_DEFERS);
-            }
-        }
-        activatableEle = el;
-    };
-    const addActivated = (el, x, y) => {
-        lastActivated = Date.now();
-        el.classList.add(ACTIVATED);
-        if (!useRippleEffect)
-            return;
-        const rippleEffect = getRippleEffect(el);
-        if (rippleEffect !== null) {
-            removeRipple();
-            activeRipple = rippleEffect.addRipple(x, y);
-        }
-    };
-    const removeRipple = () => {
-        if (activeRipple !== undefined) {
-            activeRipple.then((remove) => remove());
-            activeRipple = undefined;
-        }
-    };
-    const removeActivated = (smooth) => {
-        removeRipple();
-        const active = activatableEle;
-        if (!active) {
-            return;
-        }
-        const time = CLEAR_STATE_DEFERS - Date.now() + lastActivated;
-        if (smooth && time > 0 && !isInstant(active)) {
-            const deferId = setTimeout(() => {
-                active.classList.remove(ACTIVATED);
-                clearDefers.delete(active);
-            }, CLEAR_STATE_DEFERS);
-            clearDefers.set(active, deferId);
-        }
-        else {
-            active.classList.remove(ACTIVATED);
-        }
-    };
-    doc.addEventListener('ionGestureCaptured', cancelActive);
-    doc.addEventListener('pointerdown', pointerDown, true);
-    doc.addEventListener('pointerup', pointerUp, true);
-    /**
-     * Tap click effects such as the ripple effect should
-     * not happen when scrolling. For example, if a user scrolls
-     * the page but also happens to do a touchstart on a button
-     * as part of the scroll, the ripple effect should not
-     * be dispatched. The ripple effect should only happen
-     * if the button is activated and the page is not scrolling.
-     *
-     * pointercancel is dispatched on a gesture when scrolling
-     * starts, so this lets us avoid having to listen for
-     * ion-content's scroll events.
-     */
-    doc.addEventListener('pointercancel', cancelActive, true);
-};
-// TODO(FW-2832): type
-const getActivatableTarget = (ev) => {
-    if (ev.composedPath !== undefined) {
-        /**
-         * composedPath returns EventTarget[]. However,
-         * objects other than Element can be targets too.
-         * For example, AudioContext can be a target. In this
-         * case, we know that the event is a UIEvent so we
-         * can assume that the path will contain either Element
-         * or ShadowRoot.
-         */
-        const path = ev.composedPath();
-        for (let i = 0; i < path.length - 2; i++) {
-            const el = path[i];
-            if (!(el instanceof ShadowRoot) && el.classList.contains('ion-activatable')) {
-                return el;
-            }
-        }
-    }
-    else {
-        return ev.target.closest('.ion-activatable');
-    }
-};
-const isInstant = (el) => {
-    return el.classList.contains('ion-activatable-instant');
-};
-const getRippleEffect = (el) => {
-    if (el.shadowRoot) {
-        const ripple = el.shadowRoot.querySelector('ion-ripple-effect');
-        if (ripple) {
-            return ripple;
-        }
-    }
-    return el.querySelector('ion-ripple-effect');
-};
-const ACTIVATED = 'ion-activated';
-const ADD_ACTIVATED_DEFERS = 100;
-const CLEAR_STATE_DEFERS = 150;
-
-export { startTapClick };

package/dist/cjs/index-5915f9b3.js

@@ -1,38 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-'use strict';
-
-/**
- * Logs a warning to the console with an Ionic prefix
- * to indicate the library that is warning the developer.
- *
- * @param message - The string message to be logged to the console.
- */
-const printIonWarning = (message, ...params) => {
-    return console.warn(`[Ionic Warning]: ${message}`, ...params);
-};
-/*
- * Logs an error to the console with an Ionic prefix
- * to indicate the library that is warning the developer.
- *
- * @param message - The string message to be logged to the console.
- * @param params - Additional arguments to supply to the console.error.
- */
-const printIonError = (message, ...params) => {
-    return console.error(`[Ionic Error]: ${message}`, ...params);
-};
-/**
- * Prints an error informing developers that an implementation requires an element to be used
- * within a specific selector.
- *
- * @param el The web component element this is requiring the element.
- * @param targetSelectors The selector or selectors that were not found.
- */
-const printRequiredElementError = (el, ...targetSelectors) => {
-    return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
-};
-
-exports.printIonError = printIonError;
-exports.printIonWarning = printIonWarning;
-exports.printRequiredElementError = printRequiredElementError;

package/dist/cjs/ionic-global-d9a8bb5b.js

@@ -1,237 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-'use strict';
-
-const index = require('./index-73f75efb.js');
-
-// TODO(FW-2832): types
-class Config {
-    constructor() {
-        this.m = new Map();
-    }
-    reset(configObj) {
-        this.m = new Map(Object.entries(configObj));
-    }
-    get(key, fallback) {
-        const value = this.m.get(key);
-        return value !== undefined ? value : fallback;
-    }
-    getBoolean(key, fallback = false) {
-        const val = this.m.get(key);
-        if (val === undefined) {
-            return fallback;
-        }
-        if (typeof val === 'string') {
-            return val === 'true';
-        }
-        return !!val;
-    }
-    getNumber(key, fallback) {
-        const val = parseFloat(this.m.get(key));
-        return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
-    }
-    set(key, value) {
-        this.m.set(key, value);
-    }
-}
-const config = /*@__PURE__*/ new Config();
-const configFromSession = (win) => {
-    try {
-        const configStr = win.sessionStorage.getItem(IONIC_SESSION_KEY);
-        return configStr !== null ? JSON.parse(configStr) : {};
-    }
-    catch (e) {
-        return {};
-    }
-};
-const saveConfig = (win, c) => {
-    try {
-        win.sessionStorage.setItem(IONIC_SESSION_KEY, JSON.stringify(c));
-    }
-    catch (e) {
-        return;
-    }
-};
-const configFromURL = (win) => {
-    const configObj = {};
-    win.location.search
-        .slice(1)
-        .split('&')
-        .map((entry) => entry.split('='))
-        .map(([key, value]) => {
-        try {
-            return [decodeURIComponent(key), decodeURIComponent(value)];
-        }
-        catch (e) {
-            return ['', ''];
-        }
-    })
-        .filter(([key]) => startsWith(key, IONIC_PREFIX))
-        .map(([key, value]) => [key.slice(IONIC_PREFIX.length), value])
-        .forEach(([key, value]) => {
-        configObj[key] = value;
-    });
-    return configObj;
-};
-const startsWith = (input, search) => {
-    return input.substr(0, search.length) === search;
-};
-const IONIC_PREFIX = 'ionic:';
-const IONIC_SESSION_KEY = 'ionic-persist-config';
-
-const getPlatforms = (win) => setupPlatforms(win);
-const isPlatform = (winOrPlatform, platform) => {
-    if (typeof winOrPlatform === 'string') {
-        platform = winOrPlatform;
-        winOrPlatform = undefined;
-    }
-    return getPlatforms(winOrPlatform).includes(platform);
-};
-const setupPlatforms = (win = window) => {
-    if (typeof win === 'undefined') {
-        return [];
-    }
-    win.Ionic = win.Ionic || {};
-    let platforms = win.Ionic.platforms;
-    if (platforms == null) {
-        platforms = win.Ionic.platforms = detectPlatforms(win);
-        platforms.forEach((p) => win.document.documentElement.classList.add(`plt-${p}`));
-    }
-    return platforms;
-};
-const detectPlatforms = (win) => {
-    const customPlatformMethods = config.get('platform');
-    return Object.keys(PLATFORMS_MAP).filter((p) => {
-        const customMethod = customPlatformMethods === null || customPlatformMethods === void 0 ? void 0 : customPlatformMethods[p];
-        return typeof customMethod === 'function' ? customMethod(win) : PLATFORMS_MAP[p](win);
-    });
-};
-const isMobileWeb = (win) => isMobile(win) && !isHybrid(win);
-const isIpad = (win) => {
-    // iOS 12 and below
-    if (testUserAgent(win, /iPad/i)) {
-        return true;
-    }
-    // iOS 13+
-    if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
-        return true;
-    }
-    return false;
-};
-const isIphone = (win) => testUserAgent(win, /iPhone/i);
-const isIOS = (win) => testUserAgent(win, /iPhone|iPod/i) || isIpad(win);
-const isAndroid = (win) => testUserAgent(win, /android|sink/i);
-const isAndroidTablet = (win) => {
-    return isAndroid(win) && !testUserAgent(win, /mobile/i);
-};
-const isPhablet = (win) => {
-    const width = win.innerWidth;
-    const height = win.innerHeight;
-    const smallest = Math.min(width, height);
-    const largest = Math.max(width, height);
-    return smallest > 390 && smallest < 520 && largest > 620 && largest < 800;
-};
-const isTablet = (win) => {
-    const width = win.innerWidth;
-    const height = win.innerHeight;
-    const smallest = Math.min(width, height);
-    const largest = Math.max(width, height);
-    return isIpad(win) || isAndroidTablet(win) || (smallest > 460 && smallest < 820 && largest > 780 && largest < 1400);
-};
-const isMobile = (win) => matchMedia(win, '(any-pointer:coarse)');
-const isDesktop = (win) => !isMobile(win);
-const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
-const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
-const isCapacitorNative = (win) => {
-    const capacitor = win['Capacitor'];
-    return !!(capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative);
-};
-const isElectron = (win) => testUserAgent(win, /electron/i);
-const isPWA = (win) => { var _a; return !!(((_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, '(display-mode: standalone)').matches) || win.navigator.standalone); };
-const testUserAgent = (win, expr) => expr.test(win.navigator.userAgent);
-const matchMedia = (win, query) => { var _a; return (_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, query).matches; };
-const PLATFORMS_MAP = {
-    ipad: isIpad,
-    iphone: isIphone,
-    ios: isIOS,
-    android: isAndroid,
-    phablet: isPhablet,
-    tablet: isTablet,
-    cordova: isCordova,
-    capacitor: isCapacitorNative,
-    electron: isElectron,
-    pwa: isPWA,
-    mobile: isMobile,
-    mobileweb: isMobileWeb,
-    desktop: isDesktop,
-    hybrid: isHybrid,
-};
-
-// TODO(FW-2832): types
-let defaultMode;
-const getIonMode = (ref) => {
-    return (ref && index.getMode(ref)) || defaultMode;
-};
-const initialize = (userConfig = {}) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    const doc = window.document;
-    const win = window;
-    const Ionic = (win.Ionic = win.Ionic || {});
-    const platformHelpers = {};
-    if (userConfig._ael) {
-        platformHelpers.ael = userConfig._ael;
-    }
-    if (userConfig._rel) {
-        platformHelpers.rel = userConfig._rel;
-    }
-    if (userConfig._ce) {
-        platformHelpers.ce = userConfig._ce;
-    }
-    index.setPlatformHelpers(platformHelpers);
-    // create the Ionic.config from raw config object (if it exists)
-    // and convert Ionic.config into a ConfigApi that has a get() fn
-    const configObj = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), { persistConfig: false }), Ionic.config), configFromURL(win)), userConfig);
-    config.reset(configObj);
-    if (config.getBoolean('persistConfig')) {
-        saveConfig(win, configObj);
-    }
-    // Setup platforms
-    setupPlatforms(win);
-    // first see if the mode was set as an attribute on <html>
-    // which could have been set by the user, or by pre-rendering
-    // otherwise get the mode via config settings, and fallback to md
-    Ionic.config = config;
-    Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
-    config.set('mode', defaultMode);
-    doc.documentElement.setAttribute('mode', defaultMode);
-    doc.documentElement.classList.add(defaultMode);
-    if (config.getBoolean('_testing')) {
-        config.set('animated', false);
-    }
-    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
-    const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
-    index.setMode((elm) => {
-        while (elm) {
-            const elmMode = elm.mode || elm.getAttribute('mode');
-            if (elmMode) {
-                if (isAllowedIonicModeValue(elmMode)) {
-                    return elmMode;
-                }
-                else if (isIonicElement(elm)) {
-                    console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
-                }
-            }
-            elm = elm.parentElement;
-        }
-        return defaultMode;
-    });
-};
-
-exports.config = config;
-exports.getIonMode = getIonMode;
-exports.getPlatforms = getPlatforms;
-exports.initialize = initialize;
-exports.isPlatform = isPlatform;

package/dist/esm/index-9b0d46f4.js

@@ -1,34 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * Logs a warning to the console with an Ionic prefix
- * to indicate the library that is warning the developer.
- *
- * @param message - The string message to be logged to the console.
- */
-const printIonWarning = (message, ...params) => {
-    return console.warn(`[Ionic Warning]: ${message}`, ...params);
-};
-/*
- * Logs an error to the console with an Ionic prefix
- * to indicate the library that is warning the developer.
- *
- * @param message - The string message to be logged to the console.
- * @param params - Additional arguments to supply to the console.error.
- */
-const printIonError = (message, ...params) => {
-    return console.error(`[Ionic Error]: ${message}`, ...params);
-};
-/**
- * Prints an error informing developers that an implementation requires an element to be used
- * within a specific selector.
- *
- * @param el The web component element this is requiring the element.
- * @param targetSelectors The selector or selectors that were not found.
- */
-const printRequiredElementError = (el, ...targetSelectors) => {
-    return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
-};
-
-export { printIonError as a, printRequiredElementError as b, printIonWarning as p };