@pod-os/elements 0.21.1-5f6551f.0 → 0.21.1-888a4e9.0

package/dist/cjs/ion-app.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-84f24f31.js');
-const hardwareBackButton = require('./hardware-back-button-5dc20979.js');
+const index = require('./index-df9f178c.js');
+const hardwareBackButton = require('./hardware-back-button-a38cd954.js');
 const index$1 = require('./index-5fa17650.js');
-const ionicGlobal = require('./ionic-global-c0341cea.js');
+const ionicGlobal = require('./ionic-global-d1c24b81.js');
 require('./index-957a289d.js');
 
 const appCss = "html.plt-mobile ion-app{user-select:none}html.plt-mobile ion-app [contenteditable]{user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
@@ -23,7 +23,7 @@ const App = class {
                     Promise.resolve().then(function () { return require('./index-865239c9.js'); }).then((module) => module.startTapClick(ionicGlobal.config));
                 }
                 if (ionicGlobal.config.getBoolean('statusTap', isHybrid)) {
-                    Promise.resolve().then(function () { return require('./status-tap-e4358494.js'); }).then((module) => module.startStatusTap());
+                    Promise.resolve().then(function () { return require('./status-tap-b02a43e7.js'); }).then((module) => module.startStatusTap());
                 }
                 if (ionicGlobal.config.getBoolean('inputShims', needInputShims())) {
                     /**
@@ -33,7 +33,7 @@ const App = class {
                     const platform = ionicGlobal.isPlatform(window, 'ios') ? 'ios' : 'android';
                     Promise.resolve().then(function () { return require('./input-shims-650ba6be.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
                 }
-                const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-5dc20979.js'); });
+                const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-a38cd954.js'); });
                 const supportsHardwareBackButtonEvents = isHybrid || hardwareBackButton.shouldUseCloseWatcher();
                 if (ionicGlobal.config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();

package/dist/cjs/ion-avatar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-84f24f31.js');
-const ionicGlobal = require('./ionic-global-c0341cea.js');
+const index = require('./index-df9f178c.js');
+const ionicGlobal = require('./ionic-global-d1c24b81.js');
 
 const avatarIosCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}";
 const IonAvatarIosStyle0 = avatarIosCss;

package/dist/cjs/ion-back-button.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-84f24f31.js');
+const index = require('./index-df9f178c.js');
 const helpers = require('./helpers-95c22e6d.js');
 const theme = require('./theme-187bbc7d.js');
 const index$1 = require('./index-3129b55a.js');
-const ionicGlobal = require('./ionic-global-c0341cea.js');
+const ionicGlobal = require('./ionic-global-d1c24b81.js');
 
 const backButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;user-select:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;user-select:none;z-index:0;appearance:none}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #3880ff);--icon-margin-end:1px;--icon-margin-start:-4px;--icon-font-size:1.6em;--min-height:32px;font-size:clamp(17px, 1.0625rem, 21.998px)}.button-native{transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}";
 const IonBackButtonIosStyle0 = backButtonIosCss;

package/dist/cjs/ion-backdrop.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-84f24f31.js');
+const index = require('./index-df9f178c.js');
 const gestureController = require('./gesture-controller-85b9b0a5.js');
-const ionicGlobal = require('./ionic-global-c0341cea.js');
+const ionicGlobal = require('./ionic-global-d1c24b81.js');
 
 const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
 const IonBackdropIosStyle0 = backdropIosCss;

package/dist/cjs/ion-badge_8.cjs.entry.js

@@ -0,0 +1,368 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-df9f178c.js');
+const theme = require('./theme-187bbc7d.js');
+const ionicGlobal = require('./ionic-global-d1c24b81.js');
+const index$1 = require('./index-933ad1f6.js');
+const PodOsAware = require('./PodOsAware-a16ddb44.js');
+const ResourceAware = require('./ResourceAware-7b6501ae.js');
+
+const badgeIosCss = ":host{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}";
+const IonBadgeIosStyle0 = badgeIosCss;
+
+const badgeMdCss = ":host{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--padding-top:3px;--padding-end:4px;--padding-bottom:4px;--padding-start:4px;border-radius:4px}";
+const IonBadgeMdStyle0 = badgeMdCss;
+
+const Badge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.color = undefined;
+    }
+    render() {
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { key: '22d41ceefb76f40dfbf739fd71483f1272a45858', class: theme.createColorClasses(this.color, {
+                [mode]: true,
+            }) }, index.h("slot", { key: 'e7e65463bac5903971a8f9f6be55515f42b81a83' })));
+    }
+};
+Badge.style = {
+    ios: IonBadgeIosStyle0,
+    md: IonBadgeMdStyle0
+};
+
+const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:1.75rem;font-weight:700;line-height:1.2}";
+const IonCardTitleIosStyle0 = cardTitleIosCss;
+
+const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;line-height:1.2}";
+const IonCardTitleMdStyle0 = cardTitleMdCss;
+
+const CardTitle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.color = undefined;
+    }
+    render() {
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { key: 'a9e4190346e7d0a8e6089ec1fe01bca0f5f7200d', role: "heading", "aria-level": "2", class: theme.createColorClasses(this.color, {
+                'ion-inherit-color': true,
+                [mode]: true,
+            }) }, index.h("slot", { key: '8d87636ad703545b6d2297629205a5a8616eb94e' })));
+    }
+};
+CardTitle.style = {
+    ios: IonCardTitleIosStyle0,
+    md: IonCardTitleMdStyle0
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const SIZE_TO_MEDIA = {
+    xs: '(min-width: 0px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+};
+// Check if the window matches the media query
+// at the breakpoint passed
+// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px
+const matchBreakpoint = (breakpoint) => {
+    if (breakpoint === undefined || breakpoint === '') {
+        return true;
+    }
+    if (window.matchMedia) {
+        const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+        return window.matchMedia(mediaQuery).matches;
+    }
+    return false;
+};
+
+const colCss = ":host{-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}";
+const IonColStyle0 = colCss;
+
+const win = typeof window !== 'undefined' ? window : undefined;
+// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
+const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
+const Col = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.offset = undefined;
+        this.offsetXs = undefined;
+        this.offsetSm = undefined;
+        this.offsetMd = undefined;
+        this.offsetLg = undefined;
+        this.offsetXl = undefined;
+        this.pull = undefined;
+        this.pullXs = undefined;
+        this.pullSm = undefined;
+        this.pullMd = undefined;
+        this.pullLg = undefined;
+        this.pullXl = undefined;
+        this.push = undefined;
+        this.pushXs = undefined;
+        this.pushSm = undefined;
+        this.pushMd = undefined;
+        this.pushLg = undefined;
+        this.pushXl = undefined;
+        this.size = undefined;
+        this.sizeXs = undefined;
+        this.sizeSm = undefined;
+        this.sizeMd = undefined;
+        this.sizeLg = undefined;
+        this.sizeXl = undefined;
+    }
+    onResize() {
+        index.forceUpdate(this);
+    }
+    // Loop through all of the breakpoints to see if the media query
+    // matches and grab the column value from the relevant prop if so
+    getColumns(property) {
+        let matched;
+        for (const breakpoint of BREAKPOINTS) {
+            const matches = matchBreakpoint(breakpoint);
+            // Grab the value of the property, if it exists and our
+            // media query matches we return the value
+            const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+            if (matches && columns !== undefined) {
+                matched = columns;
+            }
+        }
+        // Return the last matched columns since the breakpoints
+        // increase in size and we want to return the largest match
+        return matched;
+    }
+    calculateSize() {
+        const columns = this.getColumns('size');
+        // If size wasn't set for any breakpoint
+        // or if the user set the size without a value
+        // it means we need to stick with the default and return
+        // e.g. <ion-col size-md>
+        if (!columns || columns === '') {
+            return;
+        }
+        // If the size is set to auto then don't calculate a size
+        const colSize = columns === 'auto'
+            ? 'auto'
+            : // If CSS supports variables we should use the grid columns var
+                SUPPORTS_VARS
+                    ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+                    : // Convert the columns to a percentage by dividing by the total number
+                        // of columns (12) and then multiplying by 100
+                        (columns / 12) * 100 + '%';
+        return {
+            flex: `0 0 ${colSize}`,
+            width: `${colSize}`,
+            'max-width': `${colSize}`,
+        };
+    }
+    // Called by push, pull, and offset since they use the same calculations
+    calculatePosition(property, modifier) {
+        const columns = this.getColumns(property);
+        if (!columns) {
+            return;
+        }
+        // If the number of columns passed are greater than 0 and less than
+        // 12 we can position the column, else default to auto
+        const amount = SUPPORTS_VARS
+            ? // If CSS supports variables we should use the grid columns var
+                `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+            : // Convert the columns to a percentage by dividing by the total number
+                // of columns (12) and then multiplying by 100
+                columns > 0 && columns < 12
+                    ? (columns / 12) * 100 + '%'
+                    : 'auto';
+        return {
+            [modifier]: amount,
+        };
+    }
+    calculateOffset(isRTL) {
+        return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+    }
+    calculatePull(isRTL) {
+        return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+    }
+    calculatePush(isRTL) {
+        return this.calculatePosition('push', isRTL ? 'right' : 'left');
+    }
+    render() {
+        const isRTL = document.dir === 'rtl';
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { key: '56ecf3b3f2be05d5f179f2d136d4ab05a4525da9', class: {
+                [mode]: true,
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: '8f1113d39dcb709300ebbeaf81bc092c1dd8da3e' })));
+    }
+};
+Col.style = IonColStyle0;
+
+const gridCss = ":host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";
+const IonGridStyle0 = gridCss;
+
+const Grid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.fixed = false;
+    }
+    render() {
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { key: 'a1c2ff77f97761c2bbcd869b2cc7b1558032b406', class: {
+                [mode]: true,
+                'grid-fixed': this.fixed,
+            } }, index.h("slot", { key: 'cd25166436cf3a63a11ad436a9b9c5a607e72600' })));
+    }
+};
+Grid.style = IonGridStyle0;
+
+const rowCss = ":host{display:flex;flex-wrap:wrap}";
+const IonRowStyle0 = rowCss;
+
+const Row = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
+    }
+};
+Row.style = IonRowStyle0;
+
+const posAddLiteralValueCss = ":host{display:flex;align-items:center;gap:0.2rem}";
+const PosAddLiteralValueStyle0 = posAddLiteralValueCss;
+
+const PosAddLiteralValue = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.subscribePodOs = index.createEvent(this, "pod-os:init", 7);
+        this.subscribeResource = index.createEvent(this, "pod-os:resource", 7);
+        this.addedLiteralValue = index.createEvent(this, "pod-os:added-literal-value", 7);
+        this.error = index.createEvent(this, "pod-os:error", 7);
+        this.receiveResource = (resource) => {
+            this.resource = resource;
+        };
+        this.receivePodOs = async (os) => {
+            this.os = os;
+        };
+    }
+    setName() { }
+    componentWillLoad() {
+        ResourceAware.subscribeResource(this);
+        PodOsAware.subscribePodOs(this);
+    }
+    async save() {
+        try {
+            await this.os.addPropertyValue(this.resource, this.selectedTermUri, this.currentValue);
+            const literal = {
+                predicate: this.selectedTermUri,
+                label: index$1.labelFromUri(this.selectedTermUri),
+                values: [this.currentValue],
+            };
+            this.addedLiteralValue.emit(literal);
+            this.currentValue = '';
+        }
+        catch (err) {
+            this.error.emit(err);
+        }
+    }
+    onTermSelected(event) {
+        this.selectedTermUri = event.detail.uri;
+        this.valueInput.setFocus();
+    }
+    render() {
+        var _a;
+        if (!((_a = this.resource) === null || _a === void 0 ? void 0 : _a.editable)) {
+            return;
+        }
+        return (index.h(index.Host, null, index.h("ion-icon", { name: "add-circle-outline" }), index.h("pos-select-term", { placeholder: "Add literal", "onPod-os:term-selected": ev => this.onTermSelected(ev) }), index.h("ion-input", { ref: el => (this.valueInput = el), value: this.currentValue, placeholder: "", onIonChange: ev => (this.currentValue = ev.detail.value.toString()), onChange: () => this.save() })));
+    }
+    static get watchers() { return {
+        "os": ["setName"]
+    }; }
+};
+PosAddLiteralValue.style = PosAddLiteralValueStyle0;
+
+const posLiteralsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n  }\n}\n";
+const PosLiteralsStyle0 = posLiteralsCss;
+
+const PosLiterals = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.subscribeResource = index.createEvent(this, "pod-os:resource", 7);
+        this.data = [];
+        this.receiveResource = (resource) => {
+            this.data = resource.literals();
+        };
+    }
+    componentWillLoad() {
+        ResourceAware.subscribeResource(this);
+    }
+    literalValueAdded(newLiteral) {
+        const existing = this.data.find(it => it.predicate === newLiteral.predicate);
+        if (!existing) {
+            this.data = [...this.data, newLiteral];
+        }
+        else {
+            this.data = this.data.map(it => {
+                return it.predicate === existing.predicate
+                    ? {
+                        predicate: existing.predicate,
+                        label: existing.label,
+                        values: [...existing.values, ...newLiteral.values],
+                    }
+                    : it;
+            });
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '35b12479d51638dc1e4de983f4901ddcea39e8df' }, this.data.length > 0 ? (index.h("dl", null, this.data.map(it => (index.h("div", { class: "predicate-values" }, index.h("dt", null, index.h("pos-predicate", { uri: it.predicate, label: it.label })), index.h("div", { class: "values" }, it.values.map(value => (index.h("dd", null, value))))))))) : null, index.h("pos-add-literal-value", { key: '76f9434f813162456c3c75728db363d708e2617f', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+    }
+};
+PosLiterals.style = PosLiteralsStyle0;
+
+const posTypeBadgesCss = ".types{display:flex;gap:var(--size-1)}.expanded{flex-direction:column;justify-content:flex-start;align-items:flex-start}ion-badge{color:#333;background:#eee}ion-badge.toggle{cursor:pointer}ion-badge.toggle:hover{background:#ddd}";
+const PosTypeBadgesStyle0 = posTypeBadgesCss;
+
+const PosTypeBadges = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.subscribeResource = index.createEvent(this, "pod-os:resource", 7);
+        this.data = [];
+        this.typeLabels = [];
+        this.isExpanded = false;
+        this.receiveResource = (resource) => {
+            this.data = resource.types();
+            this.typeLabels = [...new Set(resource.types().map(it => it.label))];
+        };
+    }
+    componentWillLoad() {
+        ResourceAware.subscribeResource(this);
+    }
+    toggleDetails() {
+        this.isExpanded = !this.isExpanded;
+    }
+    render() {
+        if (this.data.length == 0) {
+            return null;
+        }
+        if (this.isExpanded) {
+            return (index.h("div", { class: "types expanded" }, index.h("ion-badge", { class: "toggle", onClick: () => this.toggleDetails() }, index.h("ion-icon", { name: "contract-outline" })), this.data.map(it => (index.h("ion-badge", null, it.uri)))));
+        }
+        else {
+            return (index.h(index.Host, null, index.h("div", { class: "types" }, this.typeLabels.map(it => (index.h("ion-badge", null, it))), index.h("ion-badge", { class: "toggle", onClick: () => this.toggleDetails() }, index.h("ion-icon", { name: "expand-outline" })))));
+        }
+    }
+};
+PosTypeBadges.style = PosTypeBadgesStyle0;
+
+exports.ion_badge = Badge;
+exports.ion_card_title = CardTitle;
+exports.ion_col = Col;
+exports.ion_grid = Grid;
+exports.ion_row = Row;
+exports.pos_add_literal_value = PosAddLiteralValue;
+exports.pos_literals = PosLiterals;
+exports.pos_type_badges = PosTypeBadges;
+
+//# sourceMappingURL=ion-badge_8.cjs.entry.js.map