cty-mui-core 1.0.0

package/components/checkbox.js

@@ -0,0 +1,131 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes, r as renderHiddenInput } from './helpers3.js';
+import { c as createColorClasses, h as hostContext } from './theme.js';
+import { g as getIonMode } from './ionic-global.js';
+
+const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";
+const IonCheckboxIosStyle0 = checkboxIosCss;
+
+const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}";
+const IonCheckboxMdStyle0 = checkboxMdCss;
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ionChange = createEvent(this, "ionChange", 7);
+        this.ionFocus = createEvent(this, "ionFocus", 7);
+        this.ionBlur = createEvent(this, "ionBlur", 7);
+        this.inputId = `ion-cb-${checkboxIds++}`;
+        this.inheritedAttributes = {};
+        /**
+         * Sets the checked property and emits
+         * the ionChange event. Use this to update the
+         * checked state in response to user-generated
+         * actions such as a click.
+         */
+        this.setChecked = (state) => {
+            const isChecked = (this.checked = state);
+            this.ionChange.emit({
+                checked: isChecked,
+                value: this.value,
+            });
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setFocus();
+            this.setChecked(!this.checked);
+            this.indeterminate = false;
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.onClick = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            this.toggleChecked(ev);
+        };
+        this.color = undefined;
+        this.name = this.inputId;
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.value = 'on';
+        this.labelPlacement = 'start';
+        this.justify = undefined;
+        this.alignment = undefined;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+    }
+    /** @internal */
+    async setFocus() {
+        if (this.focusEl) {
+            this.focusEl.focus();
+        }
+    }
+    render() {
+        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
+        const mode = getIonMode(this);
+        const path = getSVGPath(mode, indeterminate);
+        renderHiddenInput(true, el, name, checked ? value : '', disabled);
+        return (h(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
+                [mode]: true,
+                'in-item': hostContext('ion-item', el),
+                'checkbox-checked': checked,
+                'checkbox-disabled': disabled,
+                'checkbox-indeterminate': indeterminate,
+                interactive: true,
+                [`checkbox-justify-${justify}`]: justify !== undefined,
+                [`checkbox-alignment-${alignment}`]: alignment !== undefined,
+                [`checkbox-label-placement-${labelPlacement}`]: true,
+            }), onClick: this.onClick }, h("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
+                'label-text-wrapper': true,
+                'label-text-wrapper-hidden': el.textContent === '',
+            }, part: "label" }, h("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), h("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, h("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+    }
+    getSVGPath(mode, indeterminate) {
+        let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
+        if (mode === 'md') {
+            path = indeterminate ? (h("path", { d: "M2 12H22", part: "mark" })) : (h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" }));
+        }
+        return path;
+    }
+    get el() { return this; }
+    static get style() { return {
+        ios: IonCheckboxIosStyle0,
+        md: IonCheckboxMdStyle0
+    }; }
+}, [33, "ion-checkbox", {
+        "color": [513],
+        "name": [1],
+        "checked": [1028],
+        "indeterminate": [1028],
+        "disabled": [4],
+        "value": [8],
+        "labelPlacement": [1, "label-placement"],
+        "justify": [1],
+        "alignment": [1],
+        "setFocus": [64]
+    }]);
+let checkboxIds = 0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Checkbox);
+            }
+            break;
+    } });
+}
+
+export { Checkbox as C, defineCustomElement as d };

package/components/circle.js

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const circleCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}:host{display:inline-block;position:relative;width:100px;height:100px;--cty-circle-fill:none;--cty-circle-color:var(--cty-color-white);--cty-circle-linecap:round;--cty-circle-rotate:0deg;--cty-circle-text-color:var(--cty-color-primary);--cty-circle-text-size:var(--cty-font-size-base);--cty-circle-text-weight:normal;--cty-circle-text-line-height:20px}svg{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:rotate(var(---cty-circle-rotate));transform:rotate(var(---cty-circle-rotate))}path{fill:none}.cty-circle__layer{stroke:var(--cty-circle-color);fill:var(--cty-circle-fill)}.cty-circle__hover{stroke-linecap:var(--cty-circle-linecap)}.cty-circle__text{position:absolute;top:50%;left:0;width:100%;color:var(--cty-circle-text-color);font-weight:var(--cty-circle-text-weight);font-size:var(--cty-circle-text-size);line-height:var(--cty-circle-text-line-height);text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
+const CtyCircleStyle0 = circleCss;
+
+const Circle = /*@__PURE__*/ proxyCustomElement(class Circle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.rate = 0;
+        this.width = 40;
+        this.color = 'var(--cty-color-primary)';
+        this.text = '';
+        this.clockwise = true;
+        this.zeroTransparent = true;
+        this.rad = 500;
+        this.needDefs = false;
+        this.gradientId = '';
+        this.colors = [];
+        this.perimeter = 0;
+    }
+    watchColorHandler() {
+        this.needDefs = this.color instanceof Object;
+        if (this.needDefs) {
+            this.colors = Object.keys(this.color).sort((a, b) => parseFloat(a) - parseFloat(b)).map((key) => ({
+                offset: key.toString(),
+                color: this.color[key]
+            }));
+            this.updateSVGAttr();
+        }
+    }
+    watchRadHandler() {
+        this.perimeter = 2 * 3.14 * this.rad;
+        this.updateSVGAttr();
+    }
+    updateSVGAttr() {
+        var _a, _b, _c, _d, _e;
+        (_a = this.svgEl) === null || _a === void 0 ? void 0 : _a.setAttribute('viewBox', `0 0 ${+this.width + this.rad * 2} ${+this.width + this.rad * 2}`);
+        (_b = this.layerEl) === null || _b === void 0 ? void 0 : _b.setAttribute('d', this._getPath());
+        (_c = this.hoverEl) === null || _c === void 0 ? void 0 : _c.setAttribute('d', this._getPath());
+        Array.from((_e = (_d = this.svgEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('stop')) !== null && _e !== void 0 ? _e : []).forEach((stopEL, index) => {
+            stopEL.setAttribute('key', index.toString());
+            stopEL.setAttribute('offset', this.colors[index].offset);
+            stopEL.setAttribute('stop-color', this.colors[index].color);
+        });
+    }
+    componentWillLoad() {
+        this.perimeter = 2 * 3.14 * this.rad;
+        this.gradientId = 'cty-circle-' + Math.random().toFixed(12).slice(2);
+        this.watchColorHandler();
+    }
+    componentDidLoad() {
+        this.updateSVGAttr();
+    }
+    _getPath() {
+        const viewBoxSize = +this.width + this.rad * 2;
+        const sweepFlag = this.clockwise ? 1 : 0;
+        return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
+    }
+    render() {
+        return (h(Host, { key: '75beb83b1851d9a87ad50c7b7185f317e858bc50', class: "cty-circle" }, h("svg", { key: '256c80eb3a76c7cd2356255f0c46e0e2cb372dc0', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: 'dadae631ca1d7329c6e46cf6dffc316ee0902b3a' }, h("linearGradient", { key: '49ceccab6b71b5382f0f93a9015c7582ee2bce6c', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%" }, this.colors.map(() => (h("stop", null))))), h("path", { key: '950cf13feb06df61ef664d06ed876db2504bbf98', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: { 'stroke-width': this.width + 'px' } }), h("path", { key: 'a827bc67b031ffc5ba92f00618cbcc27136b7b39', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+                'stroke': this.rate <= 0 && this.zeroTransparent ? 'transparent' : this.needDefs ? 'url(#' + this.gradientId + ')' : this.color,
+                'stroke-width': +this.width + 1 + 'px',
+                'strokeDasharray': (this.rate / 100 * this.perimeter) + 'px ' + this.perimeter + 'px'
+            } })), this.text !== '' && h("div", { key: '09461790226951d7377eb66cd96ee5965ccc671d', class: "cty-circle__text" }, this.text), h("slot", { key: 'bb9d03247849c466354a217e91123e90c3ae4689' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "color": ["watchColorHandler"],
+        "rad": ["watchColorHandler", "watchRadHandler"]
+    }; }
+    static get style() { return CtyCircleStyle0; }
+}, [1, "cty-circle", {
+        "rate": [2],
+        "width": [8],
+        "color": [1],
+        "text": [1],
+        "clockwise": [4],
+        "zeroTransparent": [4, "zero-transparent"],
+        "rad": [2],
+        "needDefs": [32],
+        "gradientId": [32],
+        "colors": [32],
+        "perimeter": [32]
+    }, undefined, {
+        "color": ["watchColorHandler"],
+        "rad": ["watchColorHandler", "watchRadHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cty-circle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cty-circle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Circle);
+            }
+            break;
+    } });
+}
+
+export { Circle as C, defineCustomElement as d };

package/components/col.js

@@ -0,0 +1,186 @@
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+/*!
+ * (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;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;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 = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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() {
+        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 = getIonMode(this);
+        return (h(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
+                [mode]: true,
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
+    }
+    static get style() { return IonColStyle0; }
+}, [1, "ion-col", {
+        "offset": [1],
+        "offsetXs": [1, "offset-xs"],
+        "offsetSm": [1, "offset-sm"],
+        "offsetMd": [1, "offset-md"],
+        "offsetLg": [1, "offset-lg"],
+        "offsetXl": [1, "offset-xl"],
+        "pull": [1],
+        "pullXs": [1, "pull-xs"],
+        "pullSm": [1, "pull-sm"],
+        "pullMd": [1, "pull-md"],
+        "pullLg": [1, "pull-lg"],
+        "pullXl": [1, "pull-xl"],
+        "push": [1],
+        "pushXs": [1, "push-xs"],
+        "pushSm": [1, "push-sm"],
+        "pushMd": [1, "push-md"],
+        "pushLg": [1, "push-lg"],
+        "pushXl": [1, "push-xl"],
+        "size": [1],
+        "sizeXs": [1, "size-xs"],
+        "sizeSm": [1, "size-sm"],
+        "sizeMd": [1, "size-md"],
+        "sizeLg": [1, "size-lg"],
+        "sizeXl": [1, "size-xl"]
+    }, [[9, "resize", "onResize"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-col"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-col":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Col);
+            }
+            break;
+    } });
+}
+
+export { Col as C, defineCustomElement as d };

package/components/config.js

@@ -0,0 +1,28 @@
+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;
+    }
+    set(key, value) {
+        this.m.set(key, value);
+    }
+}
+const config = /*@__PURE__*/ new Config();
+const setupConfig = (config) => {
+    const win = window;
+    const CtyMUI = win.CtyMUI;
+    if (CtyMUI && CtyMUI.config && CtyMUI.config.constructor.name !== 'Object') {
+        return;
+    }
+    win.CtyMUI = win.CtyMUI || {};
+    win.CtyMUI.config = Object.assign(Object.assign({}, win.CtyMUI.config), config);
+    return win.CtyMUI.config;
+};
+
+export { config as c, setupConfig as s };

package/components/config2.js

@@ -0,0 +1,18 @@
+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;
+    }
+    set(key, value) {
+        this.m.set(key, value);
+    }
+}
+const config = /*@__PURE__*/ new Config();
+
+export { config as c };

package/components/config3.js

@@ -0,0 +1,171 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Does a simple sanitization of all elements
+ * in an untrusted string
+ */
+const sanitizeDOMString = (untrustedString) => {
+    try {
+        if (untrustedString instanceof IonicSafeString) {
+            return untrustedString.value;
+        }
+        if (!isSanitizerEnabled() || typeof untrustedString !== 'string' || untrustedString === '') {
+            return untrustedString;
+        }
+        /**
+         * onload is fired when appending to a document
+         * fragment in Chrome. If a string
+         * contains onload then we should not
+         * attempt to add this to the fragment.
+         */
+        if (untrustedString.includes('onload=')) {
+            return '';
+        }
+        /**
+         * Create a document fragment
+         * separate from the main DOM,
+         * create a div to do our work in
+         */
+        const documentFragment = document.createDocumentFragment();
+        const workingDiv = document.createElement('div');
+        documentFragment.appendChild(workingDiv);
+        workingDiv.innerHTML = untrustedString;
+        /**
+         * Remove any elements
+         * that are blocked
+         */
+        blockedTags.forEach((blockedTag) => {
+            const getElementsToRemove = documentFragment.querySelectorAll(blockedTag);
+            for (let elementIndex = getElementsToRemove.length - 1; elementIndex >= 0; elementIndex--) {
+                const element = getElementsToRemove[elementIndex];
+                if (element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+                else {
+                    documentFragment.removeChild(element);
+                }
+                /**
+                 * We still need to sanitize
+                 * the children of this element
+                 * as they are left behind
+                 */
+                const childElements = getElementChildren(element);
+                /* eslint-disable-next-line */
+                for (let childIndex = 0; childIndex < childElements.length; childIndex++) {
+                    sanitizeElement(childElements[childIndex]);
+                }
+            }
+        });
+        /**
+         * Go through remaining elements and remove
+         * non-allowed attribs
+         */
+        // IE does not support .children on document fragments, only .childNodes
+        const dfChildren = getElementChildren(documentFragment);
+        /* eslint-disable-next-line */
+        for (let childIndex = 0; childIndex < dfChildren.length; childIndex++) {
+            sanitizeElement(dfChildren[childIndex]);
+        }
+        // Append document fragment to div
+        const fragmentDiv = document.createElement('div');
+        fragmentDiv.appendChild(documentFragment);
+        // First child is always the div we did our work in
+        const getInnerDiv = fragmentDiv.querySelector('div');
+        return getInnerDiv !== null ? getInnerDiv.innerHTML : fragmentDiv.innerHTML;
+    }
+    catch (err) {
+        console.error(err);
+        return '';
+    }
+};
+/**
+ * Clean up current element based on allowed attributes
+ * and then recursively dig down into any child elements to
+ * clean those up as well
+ */
+// TODO(FW-2832): type (using Element triggers other type errors as well)
+const sanitizeElement = (element) => {
+    // IE uses childNodes, so ignore nodes that are not elements
+    if (element.nodeType && element.nodeType !== 1) {
+        return;
+    }
+    /**
+     * If attributes is not a NamedNodeMap
+     * then we should remove the element entirely.
+     * This helps avoid DOM Clobbering attacks where
+     * attributes is overridden.
+     */
+    if (typeof NamedNodeMap !== 'undefined' && !(element.attributes instanceof NamedNodeMap)) {
+        element.remove();
+        return;
+    }
+    for (let i = element.attributes.length - 1; i >= 0; i--) {
+        const attribute = element.attributes.item(i);
+        const attributeName = attribute.name;
+        // remove non-allowed attribs
+        if (!allowedAttributes.includes(attributeName.toLowerCase())) {
+            element.removeAttribute(attributeName);
+            continue;
+        }
+        // clean up any allowed attribs
+        // that attempt to do any JS funny-business
+        const attributeValue = attribute.value;
+        /**
+         * We also need to check the property value
+         * as javascript: can allow special characters
+         * such as &Tab; and still be valid (i.e. java&Tab;script)
+         */
+        const propertyValue = element[attributeName];
+        /* eslint-disable */
+        if ((attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) ||
+            (propertyValue != null && propertyValue.toLowerCase().includes('javascript:'))) {
+            element.removeAttribute(attributeName);
+        }
+        /* eslint-enable */
+    }
+    /**
+     * Sanitize any nested children
+     */
+    const childElements = getElementChildren(element);
+    /* eslint-disable-next-line */
+    for (let i = 0; i < childElements.length; i++) {
+        sanitizeElement(childElements[i]);
+    }
+};
+/**
+ * IE doesn't always support .children
+ * so we revert to .childNodes instead
+ */
+// TODO(FW-2832): type
+const getElementChildren = (el) => {
+    return el.children != null ? el.children : el.childNodes;
+};
+const isSanitizerEnabled = () => {
+    var _a;
+    const win = window;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
+    if (config) {
+        if (config.get) {
+            return config.get('sanitizerEnabled', true);
+        }
+        else {
+            return config.sanitizerEnabled === true || config.sanitizerEnabled === undefined;
+        }
+    }
+    return true;
+};
+const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
+const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
+class IonicSafeString {
+    constructor(value) {
+        this.value = value;
+    }
+}
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const ENABLE_HTML_CONTENT_DEFAULT = false;
+
+export { ENABLE_HTML_CONTENT_DEFAULT as E, sanitizeDOMString as s };