@ionic/core 8.2.3-dev.11724345963.10ca6051 → 8.2.3-dev.11724780956.16364df0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-input-password-toggle.js +12 -7
- package/components/ion-input.js +14 -5
- package/components/ion-textarea.js +15 -5
- package/components/ion-toggle.js +14 -11
- package/css/ionic/bundle.ionic.css.map +1 -1
- package/css/ionic/global.bundle.ionic.css.map +1 -1
- package/css/ionic/typography.ionic.css.map +1 -1
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +12 -7
- package/dist/cjs/ion-input.cjs.entry.js +14 -5
- package/dist/cjs/ion-textarea.cjs.entry.js +15 -5
- package/dist/cjs/ion-toggle.cjs.entry.js +14 -11
- package/dist/collection/components/input/input.js +14 -5
- package/dist/collection/components/input-password-toggle/input-password-toggle.common.css +61 -0
- package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +147 -0
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +10 -7
- package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js +1 -1
- package/dist/collection/components/textarea/test/shape/textarea.e2e.js +79 -0
- package/dist/collection/components/textarea/textarea.ionic.css +12 -1
- package/dist/collection/components/textarea/textarea.js +17 -7
- package/dist/collection/components/toggle/test/color/toggle.e2e.js +1 -1
- package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js +1 -1
- package/dist/collection/components/toggle/test/item/toggle.e2e.js +4 -2
- package/dist/collection/components/toggle/test/label/toggle.e2e.js +29 -0
- package/dist/collection/components/toggle/test/sizes/toggle.e2e.js +1 -1
- package/dist/collection/components/toggle/test/states/toggle.e2e.js +29 -1
- package/dist/collection/components/toggle/toggle.ionic.css +391 -0
- package/dist/collection/components/toggle/toggle.ios.css +163 -138
- package/dist/collection/components/toggle/toggle.js +12 -9
- package/dist/collection/components/toggle/toggle.md.css +163 -138
- package/dist/docs.json +13 -5
- package/dist/esm/ion-input-password-toggle.entry.js +12 -7
- package/dist/esm/ion-input.entry.js +14 -5
- package/dist/esm/ion-textarea.entry.js +15 -5
- package/dist/esm/ion-toggle.entry.js +14 -11
- package/dist/esm-es5/ion-input-password-toggle.entry.js +1 -1
- package/dist/esm-es5/ion-input.entry.js +1 -1
- package/dist/esm-es5/ion-textarea.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/html.html-data.json +7 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-13c363e4.entry.js +4 -0
- package/dist/ionic/p-22711da4.system.entry.js +4 -0
- package/dist/ionic/p-7b590e46.system.js +1 -1
- package/dist/ionic/p-a6028478.entry.js +4 -0
- package/dist/ionic/p-aad91b75.system.entry.js +4 -0
- package/dist/ionic/p-bf55ce83.system.entry.js +4 -0
- package/dist/ionic/{p-201d8768.system.entry.js → p-c2c3807b.system.entry.js} +1 -1
- package/dist/ionic/p-c8453a83.entry.js +4 -0
- package/dist/ionic/p-de8e8567.entry.js +4 -0
- package/dist/types/components/input/input.d.ts +1 -0
- package/dist/types/components/textarea/textarea.d.ts +7 -2
- package/dist/types/components.d.ts +4 -4
- package/hydrate/index.js +55 -28
- package/package.json +1 -1
- package/dist/collection/components/input-password-toggle/input-password-toggle.css +0 -0
- package/dist/ionic/p-1ee206ac.entry.js +0 -4
- package/dist/ionic/p-3a2eb448.system.entry.js +0 -4
- package/dist/ionic/p-6691825a.system.entry.js +0 -4
- package/dist/ionic/p-7a1b640f.entry.js +0 -4
- package/dist/ionic/p-8102551e.system.entry.js +0 -4
- package/dist/ionic/p-924deb6b.entry.js +0 -4
- package/dist/ionic/p-a6bb62ea.entry.js +0 -4
|
@@ -15,17 +15,17 @@ const ionicGlobal = require('./ionic-global-2bd379ad.js');
|
|
|
15
15
|
require('./capacitor-c04564bf.js');
|
|
16
16
|
require('./index-c8d52405.js');
|
|
17
17
|
|
|
18
|
-
const
|
|
18
|
+
const checkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjkuNjYsNzcuNjZsLTEyOCwxMjhhOCw4LDAsMCwxLTExLjMyLDBsLTU2LTU2YTgsOCwwLDAsMSwxMS4zMi0xMS4zMkw5NiwxODguNjksMjE4LjM0LDY2LjM0YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiLz48L3N2Zz4=';
|
|
19
19
|
|
|
20
|
-
const
|
|
20
|
+
const minusSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjQsMTI4YTgsOCwwLDAsMS04LDhINDBhOCw4LDAsMCwxLDAtMTZIMjE2QTgsOCwwLDAsMSwyMjQsMTI4WiIvPjwvc3ZnPg==';
|
|
21
21
|
|
|
22
|
-
const
|
|
23
|
-
const IonToggleIonicStyle0 =
|
|
22
|
+
const toggleIonicCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}: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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:var(--ionic-color-neutral-800, #626262);--track-background-checked:var(--ion-color-primary, #105cef);--border-radius:var(--ionic-border-radius-full, 999px);--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);--handle-background:var(--ionic-color-base-white, #ffffff);--handle-background-checked:var(--ionic-color-base-white, #ffffff);--handle-border-radius:var(--ionic-border-radius-full, 999px);--handle-height:var(--ionic-scale-500, 20px);--handle-max-height:var(--ionic-scale-500, 20px);--handle-width:var(--ionic-scale-500, 20px);--handle-spacing:var(--ionic-space-050, 2px);--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,\n right 110ms ease-in-out 80ms;font-size:var(--ionic-font-size-350, 0.875rem);font-weight:var(--ionic-font-weight-regular, 400);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-600, 24px);text-decoration:none;text-transform:none;width:100%;z-index:2}.toggle-wrapper{-ms-flex-align:center;align-items:center;min-height:var(--ionic-scale-1200, 48px)}.native-wrapper .toggle-icon{width:var(--ionic-scale-1100, 44px);height:var(--ionic-scale-600, 24px);overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.ion-focused) .toggle-icon{outline:var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-width)}:host(.ion-activated) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ionic-state-pressed, rgba(36, 36, 36, 0.08));content:\"\"}:host(.toggle-disabled) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--ionic-color-neutral-1200, #242424)}.toggle-inner .toggle-switch-icon{width:var(--ionic-scale-400, 16px);height:var(--ionic-scale-400, 16px)}:host .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px);color:var(--ionic-color-neutral-1200, #242424)}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--ionic-space-400, 16px);margin-inline-start:var(--ionic-space-400, 16px);-webkit-margin-end:0;margin-inline-end:0}";
|
|
23
|
+
const IonToggleIonicStyle0 = toggleIonicCss;
|
|
24
24
|
|
|
25
|
-
const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
|
|
25
|
+
const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}: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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{z-index:2}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px}.toggle-switch-icon-checked-default{-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}";
|
|
26
26
|
const IonToggleIosStyle0 = toggleIosCss;
|
|
27
27
|
|
|
28
|
-
const toggleMdCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
|
|
28
|
+
const toggleMdCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}: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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{z-index:2}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.toggle-disabled){opacity:0.38}";
|
|
29
29
|
const IonToggleMdStyle0 = toggleMdCss;
|
|
30
30
|
|
|
31
31
|
const Toggle = class {
|
|
@@ -151,7 +151,7 @@ const Toggle = class {
|
|
|
151
151
|
const theme = ionicGlobal.getIonTheme(this);
|
|
152
152
|
const defaultIcons = {
|
|
153
153
|
ios: index$1.removeOutline,
|
|
154
|
-
ionic:
|
|
154
|
+
ionic: checkSvg,
|
|
155
155
|
md: index$1.checkmarkOutline,
|
|
156
156
|
};
|
|
157
157
|
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
@@ -177,7 +177,7 @@ const Toggle = class {
|
|
|
177
177
|
const theme = ionicGlobal.getIonTheme(this);
|
|
178
178
|
const defaultIcons = {
|
|
179
179
|
ios: index$1.ellipseOutline,
|
|
180
|
-
ionic:
|
|
180
|
+
ionic: minusSvg,
|
|
181
181
|
md: index$1.removeOutline,
|
|
182
182
|
};
|
|
183
183
|
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
@@ -217,8 +217,9 @@ const Toggle = class {
|
|
|
217
217
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
218
218
|
const value = this.getValue();
|
|
219
219
|
const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
|
|
220
|
+
const isIonicTheme = theme$1 === 'ionic';
|
|
220
221
|
helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
221
|
-
return (index.h(index.Host, { key: '
|
|
222
|
+
return (index.h(index.Host, { key: '93fc47d96f36150a67232eaf362a77578f3fad11', onClick: this.onClick, class: theme.createColorClasses(color, {
|
|
222
223
|
[theme$1]: true,
|
|
223
224
|
'in-item': theme.hostContext('ion-item', el),
|
|
224
225
|
'toggle-activated': activated,
|
|
@@ -228,10 +229,12 @@ const Toggle = class {
|
|
|
228
229
|
[`toggle-alignment-${alignment}`]: true,
|
|
229
230
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
230
231
|
[`toggle-${rtl}`]: true,
|
|
231
|
-
|
|
232
|
+
'ion-activatable': isIonicTheme,
|
|
233
|
+
'ion-focusable': isIonicTheme,
|
|
234
|
+
}) }, index.h("label", { key: '5393138f72b8ccb31443b56a76a96332bf5b519f', class: "toggle-wrapper" }, index.h("input", Object.assign({ key: '35af93ddf795b8145bd6f7d7eb66d4793f35372c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), index.h("div", { key: 'dee41d1d8e3ae69153087222b77b016242e9a6c8', class: {
|
|
232
235
|
'label-text-wrapper': true,
|
|
233
236
|
'label-text-wrapper-hidden': !this.hasLabel,
|
|
234
|
-
}, part: "label" }, index.h("slot", { key: '
|
|
237
|
+
}, part: "label" }, index.h("slot", { key: '0d708fa9324b8af4d730641ef1577dd682aedfd8' })), index.h("div", { key: '55b9a578a8464758c409c43288e708617dea4dd8', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
235
238
|
}
|
|
236
239
|
get el() { return index.getElement(this); }
|
|
237
240
|
static get watchers() { return {
|
|
@@ -259,6 +259,14 @@ export class Input {
|
|
|
259
259
|
getValue() {
|
|
260
260
|
return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
|
|
261
261
|
}
|
|
262
|
+
getFill() {
|
|
263
|
+
const theme = getIonTheme(this);
|
|
264
|
+
const { fill } = this;
|
|
265
|
+
if (theme === 'ionic' && fill === undefined) {
|
|
266
|
+
return 'outline';
|
|
267
|
+
}
|
|
268
|
+
return fill;
|
|
269
|
+
}
|
|
262
270
|
getLabelPlacement() {
|
|
263
271
|
const theme = getIonTheme(this);
|
|
264
272
|
const { el, labelPlacement } = this;
|
|
@@ -444,9 +452,10 @@ export class Input {
|
|
|
444
452
|
return config.get('inputClearIcon', defaultIcon);
|
|
445
453
|
}
|
|
446
454
|
render() {
|
|
447
|
-
const { disabled,
|
|
455
|
+
const { disabled, readonly, inputId, el, hasFocus, clearInput, inputClearIcon } = this;
|
|
448
456
|
const theme = getIonTheme(this);
|
|
449
457
|
const value = this.getValue();
|
|
458
|
+
const fill = this.getFill();
|
|
450
459
|
const size = this.getSize();
|
|
451
460
|
const shape = this.getShape();
|
|
452
461
|
const inItem = hostContext('ion-item', this.el);
|
|
@@ -472,7 +481,7 @@ export class Input {
|
|
|
472
481
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
473
482
|
*/
|
|
474
483
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
475
|
-
return (h(Host, { key: '
|
|
484
|
+
return (h(Host, { key: '95fe18aa3f3056ce88a2f08c0e47382213e0eeb2', class: createColorClasses(this.color, {
|
|
476
485
|
[theme]: true,
|
|
477
486
|
'has-value': hasValue,
|
|
478
487
|
'has-focus': hasFocus,
|
|
@@ -485,7 +494,7 @@ export class Input {
|
|
|
485
494
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
486
495
|
'input-disabled': disabled,
|
|
487
496
|
'input-readonly': readonly,
|
|
488
|
-
}) }, h("label", { key: '
|
|
497
|
+
}) }, h("label", { key: '088e5cbdc63481e83f2cecf1228e31533de11fe3', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '0311bc8d8ca91920c9ed8630762933d10a5d8df4', class: "native-wrapper" },
|
|
489
498
|
/**
|
|
490
499
|
* For the ionic theme, we render the outline container here
|
|
491
500
|
* instead of higher up, so it can be positioned relative to
|
|
@@ -495,7 +504,7 @@ export class Input {
|
|
|
495
504
|
* <label> element, ensuring that clicking the label text
|
|
496
505
|
* focuses the input.
|
|
497
506
|
*/
|
|
498
|
-
theme === 'ionic' && fill === 'outline' && h("div", { key: '
|
|
507
|
+
theme === 'ionic' && fill === 'outline' && h("div", { key: '8dd4695edebba5964e1dbb1d733b2d2e636ec581', class: "input-outline" }), h("slot", { key: '2065978166c9017f9383de71861babdfc3fb1cbe', name: "start" }), h("input", Object.assign({ key: '8fb6627afac9457eb23abb149607566a18175ef4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: '739f486081fc9e7ba6b1387dd6a813f3a2eb484a', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
499
508
|
/**
|
|
500
509
|
* This prevents mobile browsers from
|
|
501
510
|
* blurring the input when the clear
|
|
@@ -510,7 +519,7 @@ export class Input {
|
|
|
510
519
|
* for screen readers as it means users would be unable to swipe past the clear button.
|
|
511
520
|
*/
|
|
512
521
|
ev.stopPropagation();
|
|
513
|
-
}, onClick: this.clearTextInput }, h("ion-icon", { key: '
|
|
522
|
+
}, onClick: this.clearTextInput }, h("ion-icon", { key: '0775e8fa9b9cf9df17743472edbc2f307e4f4b9a', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '72e48a851f3fb2450af96f9d271b27dcb0bca047', name: "end" })), shouldRenderHighlight && h("div", { key: 'e91752ecd290374ae7adbe0b99163092a9e3f0fd', class: "input-highlight" })), this.renderBottomContent()));
|
|
514
523
|
}
|
|
515
524
|
static get is() { return "ion-input"; }
|
|
516
525
|
static get encapsulation() { return "scoped"; }
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a pixels given value into rem
|
|
3
|
+
*
|
|
4
|
+
* @param pixels - Value in pixels to be converted (i.e. px)
|
|
5
|
+
* @param context (optional) - Baseline value
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Convert a font size to a dynamic font size.
|
|
9
|
+
* Fonts that participate in Dynamic Type should use
|
|
10
|
+
* dynamic font sizes.
|
|
11
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
12
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
13
|
+
* convert to a unit other than $baselineUnit.
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* Convert a font size to a dynamic font size but impose
|
|
17
|
+
* a maximum font size.
|
|
18
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
19
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
20
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
21
|
+
* convert to a unit other than $baselineUnit.
|
|
22
|
+
*/
|
|
23
|
+
/**
|
|
24
|
+
* Convert a font size to a dynamic font size but impose
|
|
25
|
+
* a minimum font size.
|
|
26
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
27
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
28
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
29
|
+
* convert to a unit other than $baselineUnit.
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* Convert a font size to a dynamic font size but impose
|
|
33
|
+
* maximum and minimum font sizes.
|
|
34
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
35
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
36
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
37
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
38
|
+
* convert to a unit other than $baselineUnit.
|
|
39
|
+
*/
|
|
40
|
+
/**
|
|
41
|
+
* A heuristic that applies CSS to tablet
|
|
42
|
+
* viewports.
|
|
43
|
+
*
|
|
44
|
+
* Usage:
|
|
45
|
+
* @include tablet-viewport() {
|
|
46
|
+
* :host {
|
|
47
|
+
* background-color: green;
|
|
48
|
+
* }
|
|
49
|
+
* }
|
|
50
|
+
*/
|
|
51
|
+
/**
|
|
52
|
+
* A heuristic that applies CSS to mobile
|
|
53
|
+
* viewports (i.e. phones, not tablets).
|
|
54
|
+
*
|
|
55
|
+
* Usage:
|
|
56
|
+
* @include mobile-viewport() {
|
|
57
|
+
* :host {
|
|
58
|
+
* background-color: blue;
|
|
59
|
+
* }
|
|
60
|
+
* }
|
|
61
|
+
*/
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a pixels given value into rem
|
|
3
|
+
*
|
|
4
|
+
* @param pixels - Value in pixels to be converted (i.e. px)
|
|
5
|
+
* @param context (optional) - Baseline value
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* This is an auto-generated file, please do not change it directly.
|
|
9
|
+
* Ionic Design System
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* A heuristic that applies CSS to tablet
|
|
13
|
+
* viewports.
|
|
14
|
+
*
|
|
15
|
+
* Usage:
|
|
16
|
+
* @include tablet-viewport() {
|
|
17
|
+
* :host {
|
|
18
|
+
* background-color: green;
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* A heuristic that applies CSS to mobile
|
|
24
|
+
* viewports (i.e. phones, not tablets).
|
|
25
|
+
*
|
|
26
|
+
* Usage:
|
|
27
|
+
* @include mobile-viewport() {
|
|
28
|
+
* :host {
|
|
29
|
+
* background-color: blue;
|
|
30
|
+
* }
|
|
31
|
+
* }
|
|
32
|
+
*/
|
|
33
|
+
/**
|
|
34
|
+
* Convert a font size to a dynamic font size.
|
|
35
|
+
* Fonts that participate in Dynamic Type should use
|
|
36
|
+
* dynamic font sizes.
|
|
37
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
38
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
39
|
+
* convert to a unit other than $baselineUnit.
|
|
40
|
+
*/
|
|
41
|
+
/**
|
|
42
|
+
* Convert a font size to a dynamic font size but impose
|
|
43
|
+
* a maximum font size.
|
|
44
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
45
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
46
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
47
|
+
* convert to a unit other than $baselineUnit.
|
|
48
|
+
*/
|
|
49
|
+
/**
|
|
50
|
+
* Convert a font size to a dynamic font size but impose
|
|
51
|
+
* a minimum font size.
|
|
52
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
53
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
54
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
55
|
+
* convert to a unit other than $baselineUnit.
|
|
56
|
+
*/
|
|
57
|
+
/**
|
|
58
|
+
* Convert a font size to a dynamic font size but impose
|
|
59
|
+
* maximum and minimum font sizes.
|
|
60
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
61
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
62
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
63
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
64
|
+
* convert to a unit other than $baselineUnit.
|
|
65
|
+
*/
|
|
66
|
+
/**
|
|
67
|
+
* Convert a pixels given value into rem
|
|
68
|
+
*
|
|
69
|
+
* @param pixels - Value in pixels to be converted (i.e. px)
|
|
70
|
+
* @param context (optional) - Baseline value
|
|
71
|
+
*/
|
|
72
|
+
/**
|
|
73
|
+
* Convert a font size to a dynamic font size.
|
|
74
|
+
* Fonts that participate in Dynamic Type should use
|
|
75
|
+
* dynamic font sizes.
|
|
76
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
77
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
78
|
+
* convert to a unit other than $baselineUnit.
|
|
79
|
+
*/
|
|
80
|
+
/**
|
|
81
|
+
* Convert a font size to a dynamic font size but impose
|
|
82
|
+
* a maximum font size.
|
|
83
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
84
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
85
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
86
|
+
* convert to a unit other than $baselineUnit.
|
|
87
|
+
*/
|
|
88
|
+
/**
|
|
89
|
+
* Convert a font size to a dynamic font size but impose
|
|
90
|
+
* a minimum font size.
|
|
91
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
92
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
93
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
94
|
+
* convert to a unit other than $baselineUnit.
|
|
95
|
+
*/
|
|
96
|
+
/**
|
|
97
|
+
* Convert a font size to a dynamic font size but impose
|
|
98
|
+
* maximum and minimum font sizes.
|
|
99
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
100
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
101
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
102
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
103
|
+
* convert to a unit other than $baselineUnit.
|
|
104
|
+
*/
|
|
105
|
+
/**
|
|
106
|
+
* A heuristic that applies CSS to tablet
|
|
107
|
+
* viewports.
|
|
108
|
+
*
|
|
109
|
+
* Usage:
|
|
110
|
+
* @include tablet-viewport() {
|
|
111
|
+
* :host {
|
|
112
|
+
* background-color: green;
|
|
113
|
+
* }
|
|
114
|
+
* }
|
|
115
|
+
*/
|
|
116
|
+
/**
|
|
117
|
+
* A heuristic that applies CSS to mobile
|
|
118
|
+
* viewports (i.e. phones, not tablets).
|
|
119
|
+
*
|
|
120
|
+
* Usage:
|
|
121
|
+
* @include mobile-viewport() {
|
|
122
|
+
* :host {
|
|
123
|
+
* background-color: blue;
|
|
124
|
+
* }
|
|
125
|
+
* }
|
|
126
|
+
*/
|
|
127
|
+
:host ion-button.in-input-password-toggle {
|
|
128
|
+
--color: var(--ionic-color-neutral-800, #626262);
|
|
129
|
+
--margin-end: calc(-1 * var(--padding-end));
|
|
130
|
+
--padding-end: inherit;
|
|
131
|
+
--size: 40px;
|
|
132
|
+
-webkit-margin-start: 0;
|
|
133
|
+
margin-inline-start: 0;
|
|
134
|
+
-webkit-margin-end: var(--margin-end);
|
|
135
|
+
margin-inline-end: var(--margin-end);
|
|
136
|
+
margin-top: 0;
|
|
137
|
+
margin-bottom: 0;
|
|
138
|
+
width: var(--size);
|
|
139
|
+
height: var(--size);
|
|
140
|
+
/* Sizes */
|
|
141
|
+
}
|
|
142
|
+
:host ion-button.in-input-password-toggle ion-icon {
|
|
143
|
+
font-size: 1rem;
|
|
144
|
+
}
|
|
145
|
+
:host ion-button.in-input-password-toggle.button-large {
|
|
146
|
+
--size: 50px;
|
|
147
|
+
}
|
|
@@ -91,32 +91,35 @@ export class InputPasswordToggle {
|
|
|
91
91
|
return config.get('inputPasswordShowIcon', defaultIcon);
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
|
+
var _a;
|
|
94
95
|
const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
|
|
95
96
|
const mode = getIonMode(this);
|
|
96
97
|
const isPasswordVisible = type === 'text';
|
|
97
|
-
return (h(Host, { key: '
|
|
98
|
+
return (h(Host, { key: '8ce35f251528033244f0dd934d06e6ec7357d400', class: createColorClasses(color, {
|
|
98
99
|
[mode]: true,
|
|
99
|
-
}) }, h("ion-button", { key: '
|
|
100
|
+
}) }, h("ion-button", { key: '9eba95640ed1547bdd413ff363c43eeca8bd50db', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", size: (_a = this.el.closest('ion-input')) === null || _a === void 0 ? void 0 : _a.size, class: "in-input-password-toggle", onPointerDown: (ev) => {
|
|
100
101
|
/**
|
|
101
102
|
* This prevents mobile browsers from
|
|
102
103
|
* blurring the input when the password toggle
|
|
103
104
|
* button is activated.
|
|
104
105
|
*/
|
|
105
106
|
ev.preventDefault();
|
|
106
|
-
}, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '
|
|
107
|
+
}, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'd35b554fc63c32b54dbcd82649556081aab74898', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
|
|
107
108
|
}
|
|
108
109
|
static get is() { return "ion-input-password-toggle"; }
|
|
109
110
|
static get encapsulation() { return "shadow"; }
|
|
110
111
|
static get originalStyleUrls() {
|
|
111
112
|
return {
|
|
112
|
-
"ios": ["input-password-toggle.scss"],
|
|
113
|
-
"md": ["input-password-toggle.scss"]
|
|
113
|
+
"ios": ["input-password-toggle.common.scss"],
|
|
114
|
+
"md": ["input-password-toggle.common.scss"],
|
|
115
|
+
"ionic": ["input-password-toggle.ionic.scss"]
|
|
114
116
|
};
|
|
115
117
|
}
|
|
116
118
|
static get styleUrls() {
|
|
117
119
|
return {
|
|
118
|
-
"ios": ["input-password-toggle.css"],
|
|
119
|
-
"md": ["input-password-toggle.css"]
|
|
120
|
+
"ios": ["input-password-toggle.common.css"],
|
|
121
|
+
"md": ["input-password-toggle.common.css"],
|
|
122
|
+
"ionic": ["input-password-toggle.ionic.css"]
|
|
120
123
|
};
|
|
121
124
|
}
|
|
122
125
|
static get properties() {
|
package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { expect } from "@playwright/test";
|
|
5
5
|
import { configs, test } from "../../../../utils/test/playwright/index";
|
|
6
|
-
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
6
|
+
configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
7
7
|
test.describe(title('input password toggle: states'), () => {
|
|
8
8
|
test('should be hidden when inside of a readonly input', async ({ page }) => {
|
|
9
9
|
await page.setContent(`
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import { expect } from "@playwright/test";
|
|
5
|
+
import { configs, test } from "../../../../utils/test/playwright/index";
|
|
6
|
+
/**
|
|
7
|
+
* This behavior does not vary across directions
|
|
8
|
+
* The round shape is only available in the Ionic and Material Design themes
|
|
9
|
+
*/
|
|
10
|
+
configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
11
|
+
test.describe(title('textarea: shape'), () => {
|
|
12
|
+
test.describe('default', () => {
|
|
13
|
+
test('should not have visual regressions', async ({ page }) => {
|
|
14
|
+
await page.setContent(`
|
|
15
|
+
<ion-textarea
|
|
16
|
+
fill="outline"
|
|
17
|
+
label="Email"
|
|
18
|
+
label-placement="stacked"
|
|
19
|
+
value="hi@ionic.io"
|
|
20
|
+
></ion-textarea>
|
|
21
|
+
`, config);
|
|
22
|
+
const textarea = page.locator('ion-textarea');
|
|
23
|
+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-default`));
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
test.describe('round', () => {
|
|
27
|
+
test('should not have visual regressions', async ({ page }) => {
|
|
28
|
+
await page.setContent(`
|
|
29
|
+
<ion-textarea
|
|
30
|
+
shape="round"
|
|
31
|
+
fill="outline"
|
|
32
|
+
label="Email"
|
|
33
|
+
label-placement="stacked"
|
|
34
|
+
value="hi@ionic.io"
|
|
35
|
+
></ion-textarea>
|
|
36
|
+
`, config);
|
|
37
|
+
const textarea = page.locator('ion-textarea');
|
|
38
|
+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-round`));
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
/**
|
|
44
|
+
* The soft and rectangular shapes are only available in the Ionic theme
|
|
45
|
+
*/
|
|
46
|
+
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
47
|
+
test.describe(title('textarea: shape'), () => {
|
|
48
|
+
test.describe('soft', () => {
|
|
49
|
+
test('should not have visual regressions', async ({ page }) => {
|
|
50
|
+
await page.setContent(`
|
|
51
|
+
<ion-textarea
|
|
52
|
+
shape="soft"
|
|
53
|
+
fill="outline"
|
|
54
|
+
label="Email"
|
|
55
|
+
label-placement="stacked"
|
|
56
|
+
value="hi@ionic.io"
|
|
57
|
+
></ion-textarea>
|
|
58
|
+
`, config);
|
|
59
|
+
const textarea = page.locator('ion-textarea');
|
|
60
|
+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-soft`));
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
test.describe('rectangular', () => {
|
|
64
|
+
test('should not have visual regressions', async ({ page }) => {
|
|
65
|
+
await page.setContent(`
|
|
66
|
+
<ion-textarea
|
|
67
|
+
shape="rectangular"
|
|
68
|
+
fill="outline"
|
|
69
|
+
label="Email"
|
|
70
|
+
label-placement="stacked"
|
|
71
|
+
value="hi@ionic.io"
|
|
72
|
+
></ion-textarea>
|
|
73
|
+
`, config);
|
|
74
|
+
const textarea = page.locator('ion-textarea');
|
|
75
|
+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rectangular`));
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
});
|
|
@@ -681,7 +681,6 @@
|
|
|
681
681
|
}
|
|
682
682
|
|
|
683
683
|
:host {
|
|
684
|
-
--border-radius: var(--ionic-border-radius-400, 16px);
|
|
685
684
|
--color: var(--ionic-color-neutral-1200, #242424);
|
|
686
685
|
--highlight-color-valid: var(--ionic-color-success-base, #1ba433);
|
|
687
686
|
--highlight-color-invalid: var(--ionic-color-danger-base, #e52929);
|
|
@@ -724,6 +723,18 @@
|
|
|
724
723
|
min-height: var(--ionic-scale-3600, 144px);
|
|
725
724
|
}
|
|
726
725
|
|
|
726
|
+
:host(.textarea-shape-soft) {
|
|
727
|
+
--border-radius: var(--ionic-border-radius-200, 8px);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
:host(.textarea-shape-round) {
|
|
731
|
+
--border-radius: var(--ionic-border-radius-400, 16px);
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
:host(.textarea-shape-rectangular) {
|
|
735
|
+
--border-radius: var(--ionic-border-radius-0, 0px);
|
|
736
|
+
}
|
|
737
|
+
|
|
727
738
|
.textarea-wrapper {
|
|
728
739
|
gap: var(--ionic-space-100, 4px);
|
|
729
740
|
}
|