@esri/calcite-components 1.0.0-next.341 → 1.0.0-next.345
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/dist/calcite/assets/calcite-icon/explore16.json +1 -0
- package/dist/calcite/assets/calcite-icon/explore24.json +1 -0
- package/dist/calcite/assets/calcite-icon/explore32.json +1 -0
- package/dist/calcite/assets/calcite-icon/partlyCloudy16.json +1 -0
- package/dist/calcite/assets/calcite-icon/partlyCloudy24.json +1 -0
- package/dist/calcite/assets/calcite-icon/partlyCloudy32.json +1 -0
- package/dist/calcite/assets/calcite-icon/screenshotMode16.json +1 -0
- package/dist/calcite/assets/calcite-icon/screenshotMode24.json +1 -0
- package/dist/calcite/assets/calcite-icon/screenshotMode32.json +1 -0
- package/dist/calcite/calcite.esm.js +1 -1
- package/dist/calcite/p-0b2ac5d7.system.entry.js +5 -0
- package/dist/calcite/{p-4e9d072a.system.js → p-11b9e4bb.system.js} +1 -1
- package/dist/calcite/{p-1cbe69ff.system.entry.js → p-11f99edf.system.entry.js} +1 -1
- package/dist/calcite/p-12a2f2d9.entry.js +5 -0
- package/dist/calcite/p-18c4af8f.system.js +5 -0
- package/dist/calcite/p-18d9a261.system.js +1 -1
- package/dist/calcite/p-197226fa.entry.js +5 -0
- package/dist/calcite/{p-456fc41f.system.entry.js → p-224a5f8d.system.entry.js} +1 -1
- package/dist/calcite/p-35aa821f.entry.js +5 -0
- package/dist/calcite/{p-8554d028.system.entry.js → p-41cd5de3.system.entry.js} +1 -1
- package/dist/calcite/{p-6662658a.system.entry.js → p-496a04e4.system.entry.js} +1 -1
- package/dist/calcite/{p-cc247988.entry.js → p-520f90ae.entry.js} +1 -1
- package/dist/calcite/{p-ee5aabd7.entry.js → p-527dfb9d.entry.js} +1 -1
- package/dist/calcite/{p-d3bd900e.js → p-52966b4c.js} +1 -1
- package/dist/calcite/{p-c4b4312c.entry.js → p-531ddede.entry.js} +1 -1
- package/dist/calcite/{p-fbcf0cdb.system.entry.js → p-61c25508.system.entry.js} +1 -1
- package/dist/calcite/p-6436b89b.system.entry.js +5 -0
- package/dist/calcite/p-68c5432f.entry.js +5 -0
- package/dist/calcite/{p-8376e39b.entry.js → p-82d19468.entry.js} +1 -1
- package/dist/calcite/{p-4f7ebefc.system.js → p-834ec82a.system.js} +1 -1
- package/dist/calcite/{p-e7f7b0f8.js → p-8396a2d2.js} +1 -1
- package/dist/calcite/{p-14744d7b.system.entry.js → p-8dc9c530.system.entry.js} +1 -1
- package/dist/calcite/p-91300144.js +5 -0
- package/dist/calcite/{p-5c6f2de9.system.entry.js → p-afd8eb90.system.entry.js} +1 -1
- package/dist/calcite/{p-e7577455.entry.js → p-b28560f2.entry.js} +1 -1
- package/dist/calcite/p-e33346fd.system.entry.js +5 -0
- package/dist/calcite/p-ea59c57b.entry.js +5 -0
- package/dist/cjs/calcite-avatar.cjs.entry.js +1 -1
- package/dist/cjs/calcite-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/calcite-date-picker_4.cjs.entry.js +3 -3
- package/dist/cjs/calcite-input-date-picker.cjs.entry.js +3 -3
- package/dist/cjs/calcite-input-time-picker_2.cjs.entry.js +1 -1
- package/dist/cjs/calcite-input.cjs.entry.js +10 -9
- package/dist/cjs/calcite-radio-button.cjs.entry.js +17 -6
- package/dist/cjs/calcite-radio-group_2.cjs.entry.js +0 -45
- package/dist/cjs/calcite-tile-select_2.cjs.entry.js +37 -2
- package/dist/cjs/calcite-tile.cjs.entry.js +1 -1
- package/dist/cjs/{locale-33c458dc.js → locale-ccfa66f6.js} +1 -1
- package/dist/cjs/{number-73f7b474.js → number-f57fd111.js} +13 -6
- package/dist/cjs/{resources-16974e48.js → resources-d3c42dc4.js} +1 -1
- package/dist/collection/components/calcite-avatar/calcite-avatar.css +1 -3
- package/dist/collection/components/calcite-checkbox/calcite-checkbox.js +1 -1
- package/dist/collection/components/calcite-icon/assets/calcite-icon/explore16.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/explore24.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/explore32.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/partlyCloudy16.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/partlyCloudy24.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/partlyCloudy32.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/screenshotMode16.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/screenshotMode24.json +1 -0
- package/dist/collection/components/calcite-icon/assets/calcite-icon/screenshotMode32.json +1 -0
- package/dist/collection/components/calcite-input/calcite-input.js +8 -7
- package/dist/collection/components/calcite-radio-button/calcite-radio-button.css +4 -4
- package/dist/collection/components/calcite-radio-button/calcite-radio-button.js +16 -5
- package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js +0 -45
- package/dist/collection/components/calcite-tile/calcite-tile.css +37 -49
- package/dist/collection/components/calcite-tile-select/calcite-tile-select.css +50 -70
- package/dist/collection/components/calcite-tile-select/calcite-tile-select.js +21 -2
- package/dist/collection/components/calcite-tile-select/resources.js +20 -0
- package/dist/collection/utils/number.js +13 -6
- package/dist/components/calcite-avatar.js +1 -1
- package/dist/components/calcite-checkbox2.js +1 -1
- package/dist/components/calcite-input2.js +8 -7
- package/dist/components/calcite-radio-button.js +17 -6
- package/dist/components/calcite-radio-group-item.js +0 -45
- package/dist/components/calcite-tile-select.js +37 -2
- package/dist/components/calcite-tile2.js +1 -1
- package/dist/components/number.js +13 -6
- package/dist/custom-elements/index.js +333 -323
- package/dist/esm/calcite-avatar.entry.js +1 -1
- package/dist/esm/calcite-checkbox.entry.js +1 -1
- package/dist/esm/calcite-date-picker_4.entry.js +3 -3
- package/dist/esm/calcite-input-date-picker.entry.js +3 -3
- package/dist/esm/calcite-input-time-picker_2.entry.js +1 -1
- package/dist/esm/calcite-input.entry.js +10 -9
- package/dist/esm/calcite-radio-button.entry.js +17 -6
- package/dist/esm/calcite-radio-group_2.entry.js +0 -45
- package/dist/esm/calcite-tile-select_2.entry.js +37 -2
- package/dist/esm/calcite-tile.entry.js +1 -1
- package/dist/esm/{locale-4c38cf6d.js → locale-86b789f9.js} +1 -1
- package/dist/esm/{number-06e8500e.js → number-eb92427e.js} +13 -6
- package/dist/esm/{resources-b4eee1d4.js → resources-421133b2.js} +1 -1
- package/dist/esm-es5/calcite-avatar.entry.js +1 -1
- package/dist/esm-es5/calcite-checkbox.entry.js +1 -1
- package/dist/esm-es5/calcite-date-picker_4.entry.js +1 -1
- package/dist/esm-es5/calcite-input-date-picker.entry.js +1 -1
- package/dist/esm-es5/calcite-input-time-picker_2.entry.js +1 -1
- package/dist/esm-es5/calcite-input.entry.js +1 -1
- package/dist/esm-es5/calcite-radio-button.entry.js +1 -1
- package/dist/esm-es5/calcite-radio-group_2.entry.js +1 -1
- package/dist/esm-es5/calcite-tile-select_2.entry.js +2 -2
- package/dist/esm-es5/calcite-tile.entry.js +1 -1
- package/dist/esm-es5/{locale-4c38cf6d.js → locale-86b789f9.js} +1 -1
- package/dist/esm-es5/number-eb92427e.js +5 -0
- package/dist/esm-es5/{resources-b4eee1d4.js → resources-421133b2.js} +1 -1
- package/dist/extras/docs-json.json +1 -1
- package/dist/types/components/calcite-radio-button/calcite-radio-button.d.ts +1 -0
- package/dist/types/components/calcite-radio-group-item/calcite-radio-group-item.d.ts +0 -6
- package/dist/types/components/calcite-tile-select/resources.d.ts +16 -0
- package/hydrate/index.js +333 -323
- package/package.json +10 -10
- package/dist/calcite/p-04417e11.system.entry.js +0 -5
- package/dist/calcite/p-66146f19.entry.js +0 -5
- package/dist/calcite/p-6ba77bae.entry.js +0 -5
- package/dist/calcite/p-83744979.system.js +0 -5
- package/dist/calcite/p-cc2166e7.system.entry.js +0 -5
- package/dist/calcite/p-d00824e4.system.entry.js +0 -5
- package/dist/calcite/p-d506cebd.entry.js +0 -5
- package/dist/calcite/p-d75a285d.entry.js +0 -5
- package/dist/calcite/p-e81cda9d.entry.js +0 -5
- package/dist/calcite/p-f595d924.js +0 -5
- package/dist/esm-es5/number-06e8500e.js +0 -5
|
@@ -17,7 +17,7 @@ const CSS = {
|
|
|
17
17
|
container: "container"
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const calciteRadioButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]) .radio{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([disabled]){cursor:pointer}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-ui-opacity-disabled)}:host([hovered][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{height:var(--calcite-radio-size);max-width:var(--calcite-radio-size);min-width:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand)}:host([scale=s][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand)}:host([scale=m][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand)}:host([scale=l][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
|
|
20
|
+
const calciteRadioButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([disabled]){cursor:pointer}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-ui-opacity-disabled)}:host([hovered][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{height:var(--calcite-radio-size);max-width:var(--calcite-radio-size);min-width:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
|
|
21
21
|
|
|
22
22
|
let CalciteRadioButton = class {
|
|
23
23
|
constructor(hostRef) {
|
|
@@ -130,8 +130,10 @@ let CalciteRadioButton = class {
|
|
|
130
130
|
this.calciteInternalRadioButtonBlur.emit();
|
|
131
131
|
};
|
|
132
132
|
this.onContainerFocus = () => {
|
|
133
|
-
this.
|
|
134
|
-
|
|
133
|
+
if (!this.disabled) {
|
|
134
|
+
this.focused = true;
|
|
135
|
+
this.calciteInternalRadioButtonFocus.emit();
|
|
136
|
+
}
|
|
135
137
|
};
|
|
136
138
|
}
|
|
137
139
|
checkedChanged(newChecked) {
|
|
@@ -154,7 +156,9 @@ let CalciteRadioButton = class {
|
|
|
154
156
|
//--------------------------------------------------------------------------
|
|
155
157
|
/** Sets focus on the component. */
|
|
156
158
|
async setFocus() {
|
|
157
|
-
|
|
159
|
+
if (!this.disabled) {
|
|
160
|
+
dom.focusElement(this.containerEl);
|
|
161
|
+
}
|
|
158
162
|
}
|
|
159
163
|
onLabelClick(event) {
|
|
160
164
|
if (!this.disabled && !this.hidden) {
|
|
@@ -207,6 +211,12 @@ let CalciteRadioButton = class {
|
|
|
207
211
|
}
|
|
208
212
|
});
|
|
209
213
|
}
|
|
214
|
+
getTabIndex() {
|
|
215
|
+
if (this.disabled) {
|
|
216
|
+
return undefined;
|
|
217
|
+
}
|
|
218
|
+
return this.checked || this.isDefaultSelectable() ? 0 : -1;
|
|
219
|
+
}
|
|
210
220
|
//--------------------------------------------------------------------------
|
|
211
221
|
//
|
|
212
222
|
// Event Listeners
|
|
@@ -233,7 +243,7 @@ let CalciteRadioButton = class {
|
|
|
233
243
|
form.connectForm(this);
|
|
234
244
|
}
|
|
235
245
|
componentDidLoad() {
|
|
236
|
-
if (this.focused) {
|
|
246
|
+
if (this.focused && !this.disabled) {
|
|
237
247
|
this.setFocus();
|
|
238
248
|
}
|
|
239
249
|
}
|
|
@@ -247,7 +257,8 @@ let CalciteRadioButton = class {
|
|
|
247
257
|
//
|
|
248
258
|
// --------------------------------------------------------------------------
|
|
249
259
|
render() {
|
|
250
|
-
|
|
260
|
+
const tabIndex = this.getTabIndex();
|
|
261
|
+
return (index.h(index.Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, index.h("div", { "aria-checked": this.checked.toString(), "aria-label": label.getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex }, index.h("div", { class: "radio" })), index.h(form.HiddenFormInputSlot, { component: this })));
|
|
251
262
|
}
|
|
252
263
|
get el() { return index.getElement(this); }
|
|
253
264
|
static get watchers() { return {
|
|
@@ -10,7 +10,6 @@ const index = require('./index-6b5d2de5.js');
|
|
|
10
10
|
const dom = require('./dom-19822169.js');
|
|
11
11
|
const label = require('./label-8e3552b2.js');
|
|
12
12
|
const form = require('./form-a5b44a1f.js');
|
|
13
|
-
const observers = require('./observers-41837607.js');
|
|
14
13
|
require('./guid-b270f0db.js');
|
|
15
14
|
|
|
16
15
|
const calciteRadioGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;background-color:var(--calcite-ui-foreground-1);width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:start;align-self:flex-start}:host([width=full]){width:100%;min-width:-moz-fit-content;min-width:-webkit-fit-content;min-width:fit-content}:host([width=full]) ::slotted(calcite-radio-group-item){-ms-flex:1 1 auto;flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item){-ms-flex-pack:start;justify-content:flex-start}::slotted(calcite-radio-group-item[checked]),::slotted(calcite-radio-group-item:focus){z-index:0}:host([disabled]){pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
|
|
@@ -227,30 +226,9 @@ let CalciteRadioGroupItem = class {
|
|
|
227
226
|
this.iconFlipRtl = false;
|
|
228
227
|
/** optionally used with icon, select where to position the icon */
|
|
229
228
|
this.iconPosition = "start";
|
|
230
|
-
this.mutationObserver = observers.createObserver("mutation", () => this.syncFromExternalInput());
|
|
231
229
|
}
|
|
232
230
|
handleCheckedChange() {
|
|
233
231
|
this.calciteRadioGroupItemChange.emit();
|
|
234
|
-
this.syncToExternalInput();
|
|
235
|
-
}
|
|
236
|
-
//--------------------------------------------------------------------------
|
|
237
|
-
//
|
|
238
|
-
// Lifecycle
|
|
239
|
-
//
|
|
240
|
-
//--------------------------------------------------------------------------
|
|
241
|
-
connectedCallback() {
|
|
242
|
-
var _a;
|
|
243
|
-
const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
|
|
244
|
-
if (inputProxy) {
|
|
245
|
-
this.value = inputProxy.value;
|
|
246
|
-
this.checked = inputProxy.checked;
|
|
247
|
-
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
|
|
248
|
-
}
|
|
249
|
-
this.inputProxy = inputProxy;
|
|
250
|
-
}
|
|
251
|
-
disconnectedCallback() {
|
|
252
|
-
var _a;
|
|
253
|
-
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
254
232
|
}
|
|
255
233
|
render() {
|
|
256
234
|
const { checked, value } = this;
|
|
@@ -266,29 +244,6 @@ let CalciteRadioGroupItem = class {
|
|
|
266
244
|
"label--outline": appearance === "outline"
|
|
267
245
|
} }, this.icon && this.iconPosition === "start" ? iconEl : null, index.h("slot", null, value), index.h("slot", { name: SLOTS.input }), this.icon && this.iconPosition === "end" ? iconEl : null)));
|
|
268
246
|
}
|
|
269
|
-
//--------------------------------------------------------------------------
|
|
270
|
-
//
|
|
271
|
-
// Private Methods
|
|
272
|
-
//
|
|
273
|
-
//--------------------------------------------------------------------------
|
|
274
|
-
syncFromExternalInput() {
|
|
275
|
-
if (this.inputProxy) {
|
|
276
|
-
this.value = this.inputProxy.value;
|
|
277
|
-
this.checked = this.inputProxy.checked;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
syncToExternalInput() {
|
|
281
|
-
if (!this.inputProxy) {
|
|
282
|
-
return;
|
|
283
|
-
}
|
|
284
|
-
this.inputProxy.value = this.value;
|
|
285
|
-
if (this.checked) {
|
|
286
|
-
this.inputProxy.setAttribute("checked", "");
|
|
287
|
-
}
|
|
288
|
-
else {
|
|
289
|
-
this.inputProxy.removeAttribute("checked");
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
247
|
get el() { return index.getElement(this); }
|
|
293
248
|
static get watchers() { return {
|
|
294
249
|
"checked": ["handleCheckedChange"]
|
|
@@ -9,7 +9,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
9
9
|
const index = require('./index-6b5d2de5.js');
|
|
10
10
|
const guid = require('./guid-b270f0db.js');
|
|
11
11
|
|
|
12
|
-
const
|
|
12
|
+
const CSS = {
|
|
13
|
+
checked: "checked",
|
|
14
|
+
description: "description",
|
|
15
|
+
descriptionOnly: "description-only",
|
|
16
|
+
disabled: "disabled",
|
|
17
|
+
heading: "heading",
|
|
18
|
+
headingOnly: "heading-only",
|
|
19
|
+
icon: "icon",
|
|
20
|
+
iconOnly: "icon-only",
|
|
21
|
+
inputAlignmentEnd: "input-alignment-end",
|
|
22
|
+
inputAlignmentStart: "input-alignment-start",
|
|
23
|
+
inputEnabled: "input-enabled",
|
|
24
|
+
largeVisual: "large-visual",
|
|
25
|
+
widthAuto: "width-auto",
|
|
26
|
+
widthFull: "width-full"
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const calciteTileSelectCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block}:host .container{background-color:var(--calcite-ui-foreground-1);-webkit-box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-shadow:0 0 0 1px var(--calcite-ui-border-2);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;height:100%;max-width:300px;padding:0.75rem;position:relative;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;vertical-align:top;z-index:10}:host .container.checked{z-index:30;-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand)}:host .container.heading-only{-ms-flex-align:center;align-items:center}:host .container:not(.input-enabled) ::slotted(calcite-checkbox),:host .container:not(.input-enabled) ::slotted(calcite-radio-button){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host .container.focused:not(.disabled){z-index:30}:host .container.focused:not(.disabled):not(.input-enabled){-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand)}:host .container.input-enabled.input-alignment-start.width-auto.heading-only,:host .container.input-enabled.input-alignment-start.width-auto.icon-only,:host .container.input-enabled.input-alignment-start.width-auto.description-only,:host .container.input-enabled.input-alignment-start.width-auto.heading.description,:host .container.input-enabled.input-alignment-start.width-auto.icon.description,:host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description{display:inline-grid;grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-start.heading-only,:host .container.input-enabled.input-alignment-start.icon-only,:host .container.input-enabled.input-alignment-start.description-only,:host .container.input-enabled.input-alignment-start.heading.description,:host .container.input-enabled.input-alignment-start.icon.description,:host .container.input-enabled.input-alignment-start.heading.icon.description{gap:0.75rem}:host .container.input-enabled.input-alignment-start calcite-tile{-ms-flex-order:1;order:1}:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:0.75rem;inset-inline-start:0.75rem}:host .container.input-enabled.input-alignment-end.width-auto.heading-only,:host .container.input-enabled.input-alignment-end.width-auto.icon-only{display:inline-grid;grid-gap:0.75rem;grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-end.heading-only,:host .container.input-enabled.input-alignment-end.icon-only{gap:0.75rem}:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button){position:absolute;inset-block-start:0.75rem;inset-inline-end:0.75rem}:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:0.75rem;inset-inline-end:0.75rem}:host .container.width-full{display:-ms-flexbox;display:flex;max-width:none}:host .container.width-full calcite-tile{-ms-flex:1 1 auto;flex:1 1 auto}:host(:hover) .container{z-index:20}:host(:hover) .container:not(.input-enabled){-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand)}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";
|
|
13
30
|
|
|
14
31
|
let CalciteTileSelect = class {
|
|
15
32
|
constructor(hostRef) {
|
|
@@ -155,7 +172,25 @@ let CalciteTileSelect = class {
|
|
|
155
172
|
this.el.insertAdjacentElement("beforeend", this.input);
|
|
156
173
|
}
|
|
157
174
|
render() {
|
|
158
|
-
|
|
175
|
+
const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width } = this;
|
|
176
|
+
return (index.h("div", { class: {
|
|
177
|
+
checked,
|
|
178
|
+
container: true,
|
|
179
|
+
[CSS.description]: Boolean(description),
|
|
180
|
+
[CSS.descriptionOnly]: Boolean(!heading && !icon && description),
|
|
181
|
+
disabled,
|
|
182
|
+
focused,
|
|
183
|
+
[CSS.heading]: Boolean(heading),
|
|
184
|
+
[CSS.headingOnly]: heading && !icon && !description,
|
|
185
|
+
[CSS.icon]: Boolean(icon),
|
|
186
|
+
[CSS.iconOnly]: !heading && icon && !description,
|
|
187
|
+
[CSS.inputAlignmentEnd]: inputAlignment === "end",
|
|
188
|
+
[CSS.inputAlignmentStart]: inputAlignment === "start",
|
|
189
|
+
[CSS.inputEnabled]: inputEnabled,
|
|
190
|
+
[CSS.largeVisual]: heading && icon && !description,
|
|
191
|
+
[CSS.widthAuto]: width === "auto",
|
|
192
|
+
[CSS.widthFull]: width === "full"
|
|
193
|
+
} }, index.h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon }), index.h("slot", null)));
|
|
159
194
|
}
|
|
160
195
|
get el() { return index.getElement(this); }
|
|
161
196
|
static get watchers() { return {
|
|
@@ -15,7 +15,7 @@ const SLOTS = {
|
|
|
15
15
|
contentEnd: "content-end"
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
const calciteTileCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host
|
|
18
|
+
const calciteTileCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .container{pointer-events:none;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:0.5rem}:host .content{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:0.5rem;width:10%}:host .content-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;padding:0px;color:var(--calcite-ui-text-2);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host .content-slot-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}:host .content-slot-container:first-child{padding-right:0.75rem}:host .content-slot-container:last-child{padding-left:0.75rem}:host .heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .large-visual{-ms-flex-align:center;align-items:center;text-align:center;min-height:12rem}:host .large-visual .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:end;align-self:flex-end}:host .large-visual .content-container{-ms-flex-item-align:center;align-self:center}:host .description{pointer-events:none;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host(:not([embed])){padding:0.75rem;-webkit-box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-shadow:0 0 0 1px var(--calcite-ui-border-2)}:host(:not([embed])[href]:hover){cursor:pointer;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-brand);box-shadow:0 0 0 2px var(--calcite-ui-brand)}:host(:not([embed])[href]:active){-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand);box-shadow:0 0 0 3px var(--calcite-ui-brand)}:host([icon][heading]:not([description]):not([embed])){padding:0px}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host(:hover) .heading,:host([active]) .heading{color:var(--calcite-ui-text-1)}:host(:hover) .description,:host([active]) .description{color:var(--calcite-ui-text-2)}";
|
|
19
19
|
|
|
20
20
|
let CalciteTile = class {
|
|
21
21
|
constructor(hostRef) {
|
|
@@ -14,7 +14,7 @@ function isValidNumber(numberString) {
|
|
|
14
14
|
}
|
|
15
15
|
function parseNumberString(numberString) {
|
|
16
16
|
if (!numberString || !stringContainsNumbers(numberString)) {
|
|
17
|
-
return
|
|
17
|
+
return "";
|
|
18
18
|
}
|
|
19
19
|
let containsDecimal = false;
|
|
20
20
|
const result = numberString
|
|
@@ -33,17 +33,24 @@ function parseNumberString(numberString) {
|
|
|
33
33
|
return isValidNumber(result) ? Number(result).toString() : null;
|
|
34
34
|
}
|
|
35
35
|
function sanitizeDecimalString(decimalString) {
|
|
36
|
-
|
|
36
|
+
const decimalAtEndOfStringButNotStart = /(?!^\.)\.$/;
|
|
37
|
+
return decimalString.replace(decimalAtEndOfStringButNotStart, "");
|
|
37
38
|
}
|
|
38
39
|
function sanitizeNegativeString(negativeString) {
|
|
39
|
-
|
|
40
|
+
const allHyphensExceptTheStart = /(?!^-)-/g;
|
|
41
|
+
return negativeString.replace(allHyphensExceptTheStart, "");
|
|
40
42
|
}
|
|
41
43
|
function sanitizeLeadingZeroString(zeroString) {
|
|
42
|
-
|
|
44
|
+
const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
|
|
45
|
+
return zeroString.replace(allLeadingZerosOptionallyNegative, "$1");
|
|
43
46
|
}
|
|
44
47
|
function sanitizeNumberString(value) {
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
const sanitizedValue = sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)));
|
|
49
|
+
const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
|
|
50
|
+
return isValidNumber(sanitizedValue)
|
|
51
|
+
? isNegativeDecimalOnlyZeros.test(sanitizedValue)
|
|
52
|
+
? sanitizedValue
|
|
53
|
+
: Number(sanitizedValue).toString()
|
|
47
54
|
: value;
|
|
48
55
|
}
|
|
49
56
|
function stringContainsNumbers(string) {
|
|
@@ -113,7 +113,7 @@ export class CalciteCheckbox {
|
|
|
113
113
|
// --------------------------------------------------------------------------
|
|
114
114
|
render() {
|
|
115
115
|
return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
|
|
116
|
-
h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: 0 },
|
|
116
|
+
h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
|
|
117
117
|
h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
|
|
118
118
|
h("path", { d: this.getPath() })),
|
|
119
119
|
h("slot", null)),
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M3.384 12.607L9.799 9.51l2.74-6.05L6.49 6.202zm5.471-3.752l-3.317 1.602 1.606-3.313zM8 .2A7.8 7.8 0 1 0 15.8 8 7.809 7.809 0 0 0 8 .2zm0 14.6A6.8 6.8 0 1 1 14.8 8 6.807 6.807 0 0 1 8 14.8z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M6.45 17.216l7.981-3.845 2.98-7.115-7.116 2.98zm6.741-4.358l-4.599 2.216 2.216-4.6zM12 1.2A10.8 10.8 0 1 0 22.8 12 10.812 10.812 0 0 0 12 1.2zm0 20.6a9.8 9.8 0 1 1 9.8-9.8 9.81 9.81 0 0 1-9.8 9.8z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M8.235 24.265l11.038-5.212 4.4-10.226-10.226 4.4zm9.798-5.732L10.33 22.17l3.637-7.703zM16 2.2A13.8 13.8 0 1 0 29.8 16 13.815 13.815 0 0 0 16 2.2zm0 26.6A12.8 12.8 0 1 1 28.8 16 12.815 12.815 0 0 1 16 28.8z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M4.482 2.52L3.856.335l.96-.275.627 2.183a3.797 3.797 0 0 0-.961.275zM2.347 7.046a3.807 3.807 0 0 1-.09-.493l-2.196.63.275.96 2.196-.63a3.812 3.812 0 0 1-.185-.467zm.33-2.89a3.798 3.798 0 0 1 .272-.42l-1.79-.992-.484.875 1.802.999a3.813 3.813 0 0 1 .2-.461zm5.166-1.48a3.81 3.81 0 0 1 .413.285l.999-1.803L8.38.675l-.992 1.789a3.788 3.788 0 0 1 .455.213zM16 9.5a3.5 3.5 0 0 1-3.5 3.5h-9a2.492 2.492 0 0 1-.648-4.9c.065-.018.127-.042.194-.054a2.482 2.482 0 0 1 .394-.941 2.765 2.765 0 0 1 4.23-3.337 3.97 3.97 0 0 1 6.26 2.544A3.495 3.495 0 0 1 16 9.5zm-1 0a2.503 2.503 0 0 0-1.48-2.276l-.483-.218-.092-.522a2.989 2.989 0 0 0-5.857-.17l-.233.992-.987-.252A1.462 1.462 0 0 0 4.03 8.227l-.124.678-.678.124A1.498 1.498 0 0 0 3.5 12h9A2.503 2.503 0 0 0 15 9.5zM4.241 6.34a2.416 2.416 0 0 1 1.874-.255 3.997 3.997 0 0 1 .813-1.621c-.02-.012-.035-.027-.055-.038a1.799 1.799 0 0 0-2.447.701 1.781 1.781 0 0 0-.185 1.214z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M6.386 3.593L5.633.573l.97-.241.753 3.019zM3.472 9.129l-.121-.485-3.02.752.243.971 3.019-.753zM4.4 5.253L1.829 3.708l-.515.858L3.885 6.11zm6.347-.853l1.544-2.571-.857-.515L9.89 3.885zM23 13.187A4.813 4.813 0 0 1 18.187 18H5.438a3.438 3.438 0 0 1 0-6.875l.012.001a3.457 3.457 0 0 1 .275-.48 3.494 3.494 0 1 1 5.381-4.24A5.47 5.47 0 0 1 19.95 8.72 4.805 4.805 0 0 1 23 13.188zm-1 0a3.789 3.789 0 0 0-2.418-3.538l-.429-.17-.15-.436a4.494 4.494 0 0 0-8.629.426l-.232.99-.986-.25a2.41 2.41 0 0 0-.594-.084 2.443 2.443 0 0 0-2.206 1.42l-.268.581h-.715A2.437 2.437 0 0 0 5.437 17h12.75A3.817 3.817 0 0 0 22 13.187zM6.397 9.908a3.312 3.312 0 0 1 3.004-.667 5.465 5.465 0 0 1 .962-2.02 2.492 2.492 0 1 0-3.966 2.687z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M4.593 12.959c.05.162.124.31.184.466l-3.672 1.123-.292-.956 3.657-1.118c.037.162.074.324.123.485zM9.53 4.482L8.408.813l-.956.292L8.57 4.762c.155-.06.31-.12.471-.17.16-.048.326-.073.489-.11zm6.841-2.518l-.883-.47-1.799 3.383a6.613 6.613 0 0 1 .884.468zm-11.03 5.46L1.964 5.63l-.47.883 3.377 1.796c.067-.153.135-.305.213-.454a6.79 6.79 0 0 1 .257-.43zM31 18.5a6.5 6.5 0 0 1-6.5 6.5H7.672a4.614 4.614 0 0 1-4.608-3.727 4.532 4.532 0 0 1 4.208-5.261 4.524 4.524 0 0 1 .434-.876 5.29 5.29 0 1 1 7.765-6.954 7.485 7.485 0 0 1 11.222 4.205A6.497 6.497 0 0 1 31 18.5zm-1 0a5.511 5.511 0 0 0-3.645-5.171l-.478-.172-.143-.488a6.497 6.497 0 0 0-12.612.586l-.18.935-1.01-.145A3.172 3.172 0 0 0 11.5 14a3.497 3.497 0 0 0-3.285 2.344l-.223.633-.67.034a3.5 3.5 0 0 0-3.271 4.098A3.621 3.621 0 0 0 7.672 24H24.5a5.506 5.506 0 0 0 5.5-5.5zM6.873 12.262a4.303 4.303 0 0 0 1.428 2.1A4.438 4.438 0 0 1 11.5 13a4.46 4.46 0 0 1 .64.065 7.498 7.498 0 0 1 2.536-4.304 4.31 4.31 0 0 0-7.803 3.5z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M2 6H1V3.5A2.5 2.5 0 0 1 3.5 1H6v1H3.5A1.5 1.5 0 0 0 2 3.5zm1.5 9A1.5 1.5 0 0 1 2 13.5V11H1v2.5A2.5 2.5 0 0 0 3.5 16H6v-1zM15 13.5a1.5 1.5 0 0 1-1.5 1.5H11v1h2.5a2.5 2.5 0 0 0 2.5-2.5V11h-1zM13.5 1H11v1h2.5A1.5 1.5 0 0 1 15 3.5V6h1V3.5A2.5 2.5 0 0 0 13.5 1zM9 5h3v3h1V4H9zM5 8V5h3V4H4v4zm7 1v3H9v1h4V9zm-4 3H5V9H4v4h4z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M3 8H2V4.5A2.5 2.5 0 0 1 4.5 2H8v1H4.5A1.5 1.5 0 0 0 3 4.5zm1.5 14A1.5 1.5 0 0 1 3 20.5V17H2v3.5A2.5 2.5 0 0 0 4.5 23H8v-1zM22 20.5a1.5 1.5 0 0 1-1.5 1.5H17v1h3.5a2.5 2.5 0 0 0 2.5-2.5V17h-1zM20.5 2H17v1h3.5A1.5 1.5 0 0 1 22 4.5V8h1V4.5A2.5 2.5 0 0 0 20.5 2zM14 7h4v4h1V6h-5zm-7 4V7h4V6H6v5zm11 3v4h-4v1h5v-5zm-7 4H7v-4H6v5h5z"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"M10 30H5.5A2.5 2.5 0 0 1 3 27.5V23h1v4.5A1.5 1.5 0 0 0 5.5 29H10zm19-7v4.5a1.5 1.5 0 0 1-1.5 1.5H23v1h4.5a2.5 2.5 0 0 0 2.5-2.5V23zM10 3H5.5A2.5 2.5 0 0 0 3 5.5V10h1V5.5A1.5 1.5 0 0 1 5.5 4H10zm17.5 0H23v1h4.5A1.5 1.5 0 0 1 29 5.5V10h1V5.5A2.5 2.5 0 0 0 27.5 3zM18 9h6v6h1V8h-7zm-9 6V9h6V8H8v7zm15 3v6h-6v1h7v-7zm-9 6H9v-6H8v7h7z"
|
|
@@ -228,18 +228,19 @@ export class CalciteInput {
|
|
|
228
228
|
};
|
|
229
229
|
this.setValue = (value, nativeEvent, committing = false) => {
|
|
230
230
|
const previousValue = this.value;
|
|
231
|
-
this.value = this.type === "number" ? sanitizeNumberString(value) : value;
|
|
232
231
|
if (this.type === "number") {
|
|
233
|
-
|
|
232
|
+
const sanitizedValue = sanitizeNumberString(value);
|
|
233
|
+
this.value = sanitizedValue;
|
|
234
|
+
this.setLocalizedValue(sanitizedValue);
|
|
235
|
+
}
|
|
236
|
+
else {
|
|
237
|
+
this.value = value;
|
|
234
238
|
}
|
|
235
239
|
if (nativeEvent) {
|
|
236
|
-
if (this.type === "number") {
|
|
237
|
-
value = sanitizeNumberString(value);
|
|
238
|
-
}
|
|
239
240
|
const calciteInputInputEvent = this.calciteInputInput.emit({
|
|
240
241
|
element: this.childEl,
|
|
241
242
|
nativeEvent,
|
|
242
|
-
value
|
|
243
|
+
value: this.value
|
|
243
244
|
});
|
|
244
245
|
if (calciteInputInputEvent.defaultPrevented) {
|
|
245
246
|
this.value = previousValue;
|
|
@@ -305,7 +306,7 @@ export class CalciteInput {
|
|
|
305
306
|
this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
|
|
306
307
|
}
|
|
307
308
|
else {
|
|
308
|
-
this.value =
|
|
309
|
+
this.value = "";
|
|
309
310
|
}
|
|
310
311
|
}
|
|
311
312
|
connectLabel(this);
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
:host([hovered]) .radio,
|
|
101
|
-
:host(:not([checked])[focused]) .radio {
|
|
101
|
+
:host(:not([checked])[focused]:not([disabled])) .radio {
|
|
102
102
|
box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
|
|
103
103
|
}
|
|
104
104
|
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
box-shadow: inset 0 0 0 4px var(--calcite-ui-brand);
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
:host([scale=s][focused][checked]) .radio {
|
|
140
|
+
:host([scale=s][focused][checked]:not([disabled])) .radio {
|
|
141
141
|
box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
|
|
142
142
|
}
|
|
143
143
|
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
box-shadow: inset 0 0 0 5px var(--calcite-ui-brand);
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
:host([scale=m][focused][checked]) .radio {
|
|
149
|
+
:host([scale=m][focused][checked]:not([disabled])) .radio {
|
|
150
150
|
box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
|
|
151
151
|
}
|
|
152
152
|
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
box-shadow: inset 0 0 0 6px var(--calcite-ui-brand);
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
:host([scale=l][focused][checked]) .radio {
|
|
158
|
+
:host([scale=l][focused][checked]:not([disabled])) .radio {
|
|
159
159
|
box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
|
|
160
160
|
}
|
|
161
161
|
|
|
@@ -115,8 +115,10 @@ export class CalciteRadioButton {
|
|
|
115
115
|
this.calciteInternalRadioButtonBlur.emit();
|
|
116
116
|
};
|
|
117
117
|
this.onContainerFocus = () => {
|
|
118
|
-
this.
|
|
119
|
-
|
|
118
|
+
if (!this.disabled) {
|
|
119
|
+
this.focused = true;
|
|
120
|
+
this.calciteInternalRadioButtonFocus.emit();
|
|
121
|
+
}
|
|
120
122
|
};
|
|
121
123
|
}
|
|
122
124
|
checkedChanged(newChecked) {
|
|
@@ -139,7 +141,9 @@ export class CalciteRadioButton {
|
|
|
139
141
|
//--------------------------------------------------------------------------
|
|
140
142
|
/** Sets focus on the component. */
|
|
141
143
|
async setFocus() {
|
|
142
|
-
|
|
144
|
+
if (!this.disabled) {
|
|
145
|
+
focusElement(this.containerEl);
|
|
146
|
+
}
|
|
143
147
|
}
|
|
144
148
|
onLabelClick(event) {
|
|
145
149
|
if (!this.disabled && !this.hidden) {
|
|
@@ -192,6 +196,12 @@ export class CalciteRadioButton {
|
|
|
192
196
|
}
|
|
193
197
|
});
|
|
194
198
|
}
|
|
199
|
+
getTabIndex() {
|
|
200
|
+
if (this.disabled) {
|
|
201
|
+
return undefined;
|
|
202
|
+
}
|
|
203
|
+
return this.checked || this.isDefaultSelectable() ? 0 : -1;
|
|
204
|
+
}
|
|
195
205
|
//--------------------------------------------------------------------------
|
|
196
206
|
//
|
|
197
207
|
// Event Listeners
|
|
@@ -218,7 +228,7 @@ export class CalciteRadioButton {
|
|
|
218
228
|
connectForm(this);
|
|
219
229
|
}
|
|
220
230
|
componentDidLoad() {
|
|
221
|
-
if (this.focused) {
|
|
231
|
+
if (this.focused && !this.disabled) {
|
|
222
232
|
this.setFocus();
|
|
223
233
|
}
|
|
224
234
|
}
|
|
@@ -232,8 +242,9 @@ export class CalciteRadioButton {
|
|
|
232
242
|
//
|
|
233
243
|
// --------------------------------------------------------------------------
|
|
234
244
|
render() {
|
|
245
|
+
const tabIndex = this.getTabIndex();
|
|
235
246
|
return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
|
|
236
|
-
h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex:
|
|
247
|
+
h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex },
|
|
237
248
|
h("div", { class: "radio" })),
|
|
238
249
|
h(HiddenFormInputSlot, { component: this })));
|
|
239
250
|
}
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
|
|
6
6
|
import { getElementProp } from "../../utils/dom";
|
|
7
7
|
import { SLOTS, CSS } from "./resources";
|
|
8
|
-
import { createObserver } from "../../utils/observers";
|
|
9
8
|
export class CalciteRadioGroupItem {
|
|
10
9
|
constructor() {
|
|
11
10
|
//--------------------------------------------------------------------------
|
|
@@ -19,30 +18,9 @@ export class CalciteRadioGroupItem {
|
|
|
19
18
|
this.iconFlipRtl = false;
|
|
20
19
|
/** optionally used with icon, select where to position the icon */
|
|
21
20
|
this.iconPosition = "start";
|
|
22
|
-
this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
|
|
23
21
|
}
|
|
24
22
|
handleCheckedChange() {
|
|
25
23
|
this.calciteRadioGroupItemChange.emit();
|
|
26
|
-
this.syncToExternalInput();
|
|
27
|
-
}
|
|
28
|
-
//--------------------------------------------------------------------------
|
|
29
|
-
//
|
|
30
|
-
// Lifecycle
|
|
31
|
-
//
|
|
32
|
-
//--------------------------------------------------------------------------
|
|
33
|
-
connectedCallback() {
|
|
34
|
-
var _a;
|
|
35
|
-
const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
|
|
36
|
-
if (inputProxy) {
|
|
37
|
-
this.value = inputProxy.value;
|
|
38
|
-
this.checked = inputProxy.checked;
|
|
39
|
-
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
|
|
40
|
-
}
|
|
41
|
-
this.inputProxy = inputProxy;
|
|
42
|
-
}
|
|
43
|
-
disconnectedCallback() {
|
|
44
|
-
var _a;
|
|
45
|
-
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
46
24
|
}
|
|
47
25
|
render() {
|
|
48
26
|
const { checked, value } = this;
|
|
@@ -63,29 +41,6 @@ export class CalciteRadioGroupItem {
|
|
|
63
41
|
h("slot", { name: SLOTS.input }),
|
|
64
42
|
this.icon && this.iconPosition === "end" ? iconEl : null)));
|
|
65
43
|
}
|
|
66
|
-
//--------------------------------------------------------------------------
|
|
67
|
-
//
|
|
68
|
-
// Private Methods
|
|
69
|
-
//
|
|
70
|
-
//--------------------------------------------------------------------------
|
|
71
|
-
syncFromExternalInput() {
|
|
72
|
-
if (this.inputProxy) {
|
|
73
|
-
this.value = this.inputProxy.value;
|
|
74
|
-
this.checked = this.inputProxy.checked;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
syncToExternalInput() {
|
|
78
|
-
if (!this.inputProxy) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
this.inputProxy.value = this.value;
|
|
82
|
-
if (this.checked) {
|
|
83
|
-
this.inputProxy.setAttribute("checked", "");
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
this.inputProxy.removeAttribute("checked");
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
44
|
static get is() { return "calcite-radio-group-item"; }
|
|
90
45
|
static get encapsulation() { return "shadow"; }
|
|
91
46
|
static get originalStyleUrls() { return {
|