@esri/calcite-components 1.0.0-next.344 → 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.
Files changed (95) hide show
  1. package/dist/calcite/assets/calcite-icon/explore16.json +1 -0
  2. package/dist/calcite/assets/calcite-icon/explore24.json +1 -0
  3. package/dist/calcite/assets/calcite-icon/explore32.json +1 -0
  4. package/dist/calcite/assets/calcite-icon/partlyCloudy16.json +1 -0
  5. package/dist/calcite/assets/calcite-icon/partlyCloudy24.json +1 -0
  6. package/dist/calcite/assets/calcite-icon/partlyCloudy32.json +1 -0
  7. package/dist/calcite/assets/calcite-icon/screenshotMode16.json +1 -0
  8. package/dist/calcite/assets/calcite-icon/screenshotMode24.json +1 -0
  9. package/dist/calcite/assets/calcite-icon/screenshotMode32.json +1 -0
  10. package/dist/calcite/calcite.esm.js +1 -1
  11. package/dist/calcite/p-0b2ac5d7.system.entry.js +5 -0
  12. package/dist/calcite/{p-4c441dea.system.js → p-11b9e4bb.system.js} +1 -1
  13. package/dist/calcite/{p-6b5996c3.system.entry.js → p-11f99edf.system.entry.js} +1 -1
  14. package/dist/calcite/p-12a2f2d9.entry.js +5 -0
  15. package/dist/calcite/{p-34aadde6.system.js → p-18c4af8f.system.js} +1 -1
  16. package/dist/calcite/p-18d9a261.system.js +1 -1
  17. package/dist/calcite/{p-4fc37efc.system.entry.js → p-224a5f8d.system.entry.js} +1 -1
  18. package/dist/calcite/p-35aa821f.entry.js +5 -0
  19. package/dist/calcite/{p-cc247988.entry.js → p-520f90ae.entry.js} +1 -1
  20. package/dist/calcite/{p-6ffee063.entry.js → p-527dfb9d.entry.js} +1 -1
  21. package/dist/calcite/{p-f50a353a.js → p-52966b4c.js} +1 -1
  22. package/dist/calcite/{p-23418eda.entry.js → p-531ddede.entry.js} +1 -1
  23. package/dist/calcite/{p-9a9781f2.system.entry.js → p-61c25508.system.entry.js} +1 -1
  24. package/dist/calcite/p-6436b89b.system.entry.js +5 -0
  25. package/dist/calcite/{p-669a3067.system.js → p-834ec82a.system.js} +1 -1
  26. package/dist/calcite/{p-bb5b0182.js → p-8396a2d2.js} +1 -1
  27. package/dist/calcite/{p-0fa7d7eb.system.entry.js → p-8dc9c530.system.entry.js} +1 -1
  28. package/dist/calcite/{p-da8ff8cb.js → p-91300144.js} +1 -1
  29. package/dist/calcite/{p-550c42c5.entry.js → p-b28560f2.entry.js} +1 -1
  30. package/dist/calcite/p-e33346fd.system.entry.js +5 -0
  31. package/dist/calcite/p-ea59c57b.entry.js +5 -0
  32. package/dist/cjs/calcite-date-picker_4.cjs.entry.js +3 -3
  33. package/dist/cjs/calcite-input-date-picker.cjs.entry.js +3 -3
  34. package/dist/cjs/calcite-input-time-picker_2.cjs.entry.js +1 -1
  35. package/dist/cjs/calcite-input.cjs.entry.js +9 -8
  36. package/dist/cjs/calcite-radio-group_2.cjs.entry.js +0 -45
  37. package/dist/cjs/calcite-tile-select_2.cjs.entry.js +37 -2
  38. package/dist/cjs/calcite-tile.cjs.entry.js +1 -1
  39. package/dist/cjs/{locale-c4cb51ca.js → locale-ccfa66f6.js} +1 -1
  40. package/dist/cjs/{number-5feb0c13.js → number-f57fd111.js} +12 -5
  41. package/dist/cjs/{resources-5bf6cc29.js → resources-d3c42dc4.js} +1 -1
  42. package/dist/collection/components/calcite-icon/assets/calcite-icon/explore16.json +1 -0
  43. package/dist/collection/components/calcite-icon/assets/calcite-icon/explore24.json +1 -0
  44. package/dist/collection/components/calcite-icon/assets/calcite-icon/explore32.json +1 -0
  45. package/dist/collection/components/calcite-icon/assets/calcite-icon/partlyCloudy16.json +1 -0
  46. package/dist/collection/components/calcite-icon/assets/calcite-icon/partlyCloudy24.json +1 -0
  47. package/dist/collection/components/calcite-icon/assets/calcite-icon/partlyCloudy32.json +1 -0
  48. package/dist/collection/components/calcite-icon/assets/calcite-icon/screenshotMode16.json +1 -0
  49. package/dist/collection/components/calcite-icon/assets/calcite-icon/screenshotMode24.json +1 -0
  50. package/dist/collection/components/calcite-icon/assets/calcite-icon/screenshotMode32.json +1 -0
  51. package/dist/collection/components/calcite-input/calcite-input.js +7 -6
  52. package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js +0 -45
  53. package/dist/collection/components/calcite-tile/calcite-tile.css +37 -49
  54. package/dist/collection/components/calcite-tile-select/calcite-tile-select.css +50 -70
  55. package/dist/collection/components/calcite-tile-select/calcite-tile-select.js +21 -2
  56. package/dist/collection/components/calcite-tile-select/resources.js +20 -0
  57. package/dist/collection/utils/number.js +12 -5
  58. package/dist/components/calcite-input2.js +7 -6
  59. package/dist/components/calcite-radio-group-item.js +0 -45
  60. package/dist/components/calcite-tile-select.js +37 -2
  61. package/dist/components/calcite-tile2.js +1 -1
  62. package/dist/components/number.js +12 -5
  63. package/dist/custom-elements/index.js +313 -314
  64. package/dist/esm/calcite-date-picker_4.entry.js +3 -3
  65. package/dist/esm/calcite-input-date-picker.entry.js +3 -3
  66. package/dist/esm/calcite-input-time-picker_2.entry.js +1 -1
  67. package/dist/esm/calcite-input.entry.js +9 -8
  68. package/dist/esm/calcite-radio-group_2.entry.js +0 -45
  69. package/dist/esm/calcite-tile-select_2.entry.js +37 -2
  70. package/dist/esm/calcite-tile.entry.js +1 -1
  71. package/dist/esm/{locale-d635bb3b.js → locale-86b789f9.js} +1 -1
  72. package/dist/esm/{number-56f92613.js → number-eb92427e.js} +12 -5
  73. package/dist/esm/{resources-ffaa09ee.js → resources-421133b2.js} +1 -1
  74. package/dist/esm-es5/calcite-date-picker_4.entry.js +1 -1
  75. package/dist/esm-es5/calcite-input-date-picker.entry.js +1 -1
  76. package/dist/esm-es5/calcite-input-time-picker_2.entry.js +1 -1
  77. package/dist/esm-es5/calcite-input.entry.js +1 -1
  78. package/dist/esm-es5/calcite-radio-group_2.entry.js +1 -1
  79. package/dist/esm-es5/calcite-tile-select_2.entry.js +2 -2
  80. package/dist/esm-es5/calcite-tile.entry.js +1 -1
  81. package/dist/esm-es5/{locale-d635bb3b.js → locale-86b789f9.js} +1 -1
  82. package/dist/esm-es5/number-eb92427e.js +5 -0
  83. package/dist/esm-es5/{resources-ffaa09ee.js → resources-421133b2.js} +1 -1
  84. package/dist/extras/docs-json.json +1 -1
  85. package/dist/types/components/calcite-radio-group-item/calcite-radio-group-item.d.ts +0 -6
  86. package/dist/types/components/calcite-tile-select/resources.d.ts +16 -0
  87. package/hydrate/index.js +313 -314
  88. package/package.json +10 -10
  89. package/dist/calcite/p-04417e11.system.entry.js +0 -5
  90. package/dist/calcite/p-478693b3.entry.js +0 -5
  91. package/dist/calcite/p-66146f19.entry.js +0 -5
  92. package/dist/calcite/p-cc2166e7.system.entry.js +0 -5
  93. package/dist/calcite/p-d00824e4.system.entry.js +0 -5
  94. package/dist/calcite/p-d506cebd.entry.js +0 -5
  95. package/dist/esm-es5/number-56f92613.js +0 -5
@@ -33,17 +33,24 @@ function parseNumberString(numberString) {
33
33
  return isValidNumber(result) ? Number(result).toString() : null;
34
34
  }
35
35
  function sanitizeDecimalString(decimalString) {
36
- return (decimalString === null || decimalString === void 0 ? void 0 : decimalString.endsWith(".")) ? decimalString.replace(".", "") : decimalString;
36
+ const decimalAtEndOfStringButNotStart = /(?!^\.)\.$/;
37
+ return decimalString.replace(decimalAtEndOfStringButNotStart, "");
37
38
  }
38
39
  function sanitizeNegativeString(negativeString) {
39
- return negativeString.charAt(0) + negativeString.substring(1).replace(/-/g, "");
40
+ const allHyphensExceptTheStart = /(?!^-)-/g;
41
+ return negativeString.replace(allHyphensExceptTheStart, "");
40
42
  }
41
43
  function sanitizeLeadingZeroString(zeroString) {
42
- return zeroString.replace(/^0+$/, "0");
44
+ const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
45
+ return zeroString.replace(allLeadingZerosOptionallyNegative, "$1");
43
46
  }
44
47
  function sanitizeNumberString(value) {
45
- return value
46
- ? Number(sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)))).toString()
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) {
@@ -5,7 +5,7 @@
5
5
  'use strict';
6
6
 
7
7
  const index = require('./index-6b5d2de5.js');
8
- const locale = require('./locale-c4cb51ca.js');
8
+ const locale = require('./locale-ccfa66f6.js');
9
9
 
10
10
  /**
11
11
  * Get supported locale code from raw user input
@@ -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
- this.setLocalizedValue(this.value);
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;
@@ -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 {
@@ -88,46 +88,13 @@
88
88
  transition-duration: 150ms;
89
89
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
90
90
  }
91
-
92
- :host(:not([embed])) {
93
- padding: 0.75rem;
94
- box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
95
- }
96
-
97
- :host(:not([embed])[href]:hover) {
98
- cursor: pointer;
99
- box-shadow: 0 0 0 2px var(--calcite-ui-brand);
100
- }
101
-
102
- :host(:not([embed])[href]:active) {
103
- box-shadow: 0 0 0 3px var(--calcite-ui-brand);
104
- }
105
-
106
- :host([icon][heading]:not([description]):not([embed])) {
107
- padding: 0px;
108
- }
109
-
110
- :host([icon][heading]:not([description])) .icon {
111
- display: flex;
112
- justify-content: center;
113
- }
114
- :host([icon][heading]:not([description])) .large-visual {
115
- text-align: center;
116
- }
117
-
118
- :host([disabled]) {
119
- opacity: var(--calcite-ui-opacity-disabled);
120
- pointer-events: none;
121
- }
122
-
123
- .container {
91
+ :host .container {
124
92
  pointer-events: none;
125
93
  display: grid;
126
94
  grid-template-columns: repeat(1, minmax(0, 1fr));
127
95
  gap: 0.5rem;
128
96
  }
129
-
130
- .content {
97
+ :host .content {
131
98
  display: flex;
132
99
  flex: 1 1 auto;
133
100
  flex-direction: column;
@@ -135,8 +102,7 @@
135
102
  gap: 0.5rem;
136
103
  width: 10%;
137
104
  }
138
-
139
- .content-container {
105
+ :host .content-container {
140
106
  display: flex;
141
107
  width: 100%;
142
108
  flex: 1 1 auto;
@@ -147,20 +113,18 @@
147
113
  outline-color: transparent;
148
114
  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
149
115
  }
150
-
151
- .content-slot-container {
116
+ :host .content-slot-container {
152
117
  display: flex;
153
118
  align-items: center;
154
119
  background-color: var(--calcite-ui-foreground-1);
155
120
  }
156
- .content-slot-container:first-child {
121
+ :host .content-slot-container:first-child {
157
122
  padding-right: 0.75rem;
158
123
  }
159
- .content-slot-container:last-child {
124
+ :host .content-slot-container:last-child {
160
125
  padding-left: 0.75rem;
161
126
  }
162
-
163
- .heading {
127
+ :host .heading {
164
128
  pointer-events: none;
165
129
  overflow-wrap: break-word;
166
130
  font-size: var(--calcite-font-size--1);
@@ -170,19 +134,20 @@
170
134
  transition-duration: 150ms;
171
135
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
172
136
  }
173
-
174
- .large-visual {
137
+ :host .large-visual {
175
138
  align-items: center;
139
+ text-align: center;
176
140
  min-height: 12rem;
177
141
  }
178
- .large-visual .icon {
142
+ :host .large-visual .icon {
143
+ display: flex;
144
+ justify-content: center;
179
145
  align-self: flex-end;
180
146
  }
181
- .large-visual .content-container {
147
+ :host .large-visual .content-container {
182
148
  align-self: center;
183
149
  }
184
-
185
- .description {
150
+ :host .description {
186
151
  pointer-events: none;
187
152
  font-size: var(--calcite-font-size--2);
188
153
  line-height: 1.375;
@@ -191,6 +156,29 @@
191
156
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
192
157
  }
193
158
 
159
+ :host(:not([embed])) {
160
+ padding: 0.75rem;
161
+ box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
162
+ }
163
+
164
+ :host(:not([embed])[href]:hover) {
165
+ cursor: pointer;
166
+ box-shadow: 0 0 0 2px var(--calcite-ui-brand);
167
+ }
168
+
169
+ :host(:not([embed])[href]:active) {
170
+ box-shadow: 0 0 0 3px var(--calcite-ui-brand);
171
+ }
172
+
173
+ :host([icon][heading]:not([description]):not([embed])) {
174
+ padding: 0px;
175
+ }
176
+
177
+ :host([disabled]) {
178
+ opacity: var(--calcite-ui-opacity-disabled);
179
+ pointer-events: none;
180
+ }
181
+
194
182
  :host(:hover) .heading, :host([active]) .heading {
195
183
  color: var(--calcite-ui-text-1);
196
184
  }
@@ -78,7 +78,10 @@
78
78
  display: none;
79
79
  }
80
80
 
81
- .root {
81
+ :host {
82
+ display: block;
83
+ }
84
+ :host .container {
82
85
  background-color: var(--calcite-ui-foreground-1);
83
86
  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
84
87
  box-sizing: border-box;
@@ -92,47 +95,14 @@
92
95
  vertical-align: top;
93
96
  z-index: 10;
94
97
  }
95
-
96
- :host {
97
- display: block;
98
- }
99
-
100
- :host(:hover) .root {
101
- z-index: 20;
102
- box-shadow: 0 0 0 1px var(--calcite-ui-border-1);
103
- }
104
-
105
- :host([checked]) .root {
106
- z-index: 30;
107
- box-shadow: 0 0 0 1px var(--calcite-ui-brand);
108
- }
109
-
110
- .root.focused {
98
+ :host .container.checked {
111
99
  z-index: 30;
112
- }
113
-
114
- :host(:not([input-enabled]):hover) .root {
115
100
  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
116
101
  }
117
-
118
- :host(:not([input-enabled])) .root.focused {
119
- 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);
120
- }
121
-
122
- :host([width=full]) .root {
123
- display: flex;
124
- max-width: none;
125
- }
126
- :host([width=full]) calcite-tile {
127
- flex: 1 1 auto;
128
- }
129
-
130
- :host([input-alignment=start][width=full]) calcite-tile {
131
- order: 1;
132
- margin-inline-start: 0.75rem;
102
+ :host .container.heading-only {
103
+ align-items: center;
133
104
  }
134
-
135
- :host(:not([input-enabled])) ::slotted(calcite-checkbox), :host(:not([input-enabled])) ::slotted(calcite-radio-button) {
105
+ :host .container:not(.input-enabled) ::slotted(calcite-checkbox), :host .container:not(.input-enabled) ::slotted(calcite-radio-button) {
136
106
  position: absolute;
137
107
  width: 1px;
138
108
  height: 1px;
@@ -143,54 +113,64 @@
143
113
  white-space: nowrap;
144
114
  border-width: 0;
145
115
  }
146
-
147
- :host([heading]:not([icon]):not([description])) .root {
148
- align-items: center;
116
+ :host .container.focused:not(.disabled) {
117
+ z-index: 30;
149
118
  }
150
-
151
- :host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) .root,
152
- :host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) .root {
119
+ :host .container.focused:not(.disabled):not(.input-enabled) {
120
+ 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);
121
+ }
122
+ :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 {
153
123
  display: inline-grid;
154
- grid-gap: 0.75rem;
155
124
  grid-template-columns: max-content 1fr;
156
125
  }
157
- :host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) ::slotted(calcite-checkbox),
158
- :host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) ::slotted(calcite-radio-button),
159
- :host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) ::slotted(calcite-checkbox),
160
- :host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) ::slotted(calcite-radio-button) {
161
- order: 0;
126
+ :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 {
127
+ gap: 0.75rem;
162
128
  }
163
- :host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) calcite-tile,
164
- :host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) calcite-tile {
129
+ :host .container.input-enabled.input-alignment-start calcite-tile {
165
130
  order: 1;
166
131
  }
167
-
168
- :host([input-enabled][input-alignment=start][icon][heading]:not([description])) ::slotted(calcite-checkbox),
169
- :host([input-enabled][input-alignment=start][icon][heading]:not([description])) ::slotted(calcite-radio-button) {
132
+ :host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),
133
+ :host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button) {
170
134
  position: absolute;
171
- top: 0.75rem;
135
+ inset-block-start: 0.75rem;
172
136
  inset-inline-start: 0.75rem;
173
137
  }
174
-
175
- :host([input-enabled][input-alignment=end][icon][heading]) ::slotted(calcite-checkbox),
176
- :host([input-enabled][input-alignment=end][icon][heading]) ::slotted(calcite-radio-button) {
177
- position: absolute;
178
- top: 0.75rem;
179
- inset-inline-end: 0.75rem;
180
- }
181
-
182
- :host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) .root {
138
+ :host .container.input-enabled.input-alignment-end.width-auto.heading-only, :host .container.input-enabled.input-alignment-end.width-auto.icon-only {
183
139
  display: inline-grid;
184
140
  grid-gap: 0.75rem;
185
141
  grid-template-columns: max-content 1fr;
186
142
  }
187
- :host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) ::slotted(calcite-checkbox),
188
- :host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) ::slotted(calcite-radio-button) {
189
- justify-self: flex-end;
143
+ :host .container.input-enabled.input-alignment-end.heading-only, :host .container.input-enabled.input-alignment-end.icon-only {
144
+ gap: 0.75rem;
145
+ }
146
+ :host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),
147
+ :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),
148
+ :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),
149
+ :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),
150
+ :host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button) {
151
+ position: absolute;
152
+ inset-block-start: 0.75rem;
153
+ inset-inline-end: 0.75rem;
154
+ }
155
+ :host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),
156
+ :host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button) {
157
+ position: absolute;
158
+ inset-block-start: 0.75rem;
159
+ inset-inline-end: 0.75rem;
160
+ }
161
+ :host .container.width-full {
162
+ display: flex;
163
+ max-width: none;
164
+ }
165
+ :host .container.width-full calcite-tile {
166
+ flex: 1 1 auto;
190
167
  }
191
168
 
192
- :host([hidden]) {
193
- display: none;
169
+ :host(:hover) .container {
170
+ z-index: 20;
171
+ }
172
+ :host(:hover) .container:not(.input-enabled) {
173
+ box-shadow: 0 0 0 1px var(--calcite-ui-brand);
194
174
  }
195
175
 
196
176
  :host([disabled]) {
@@ -4,6 +4,7 @@
4
4
  */
5
5
  import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
6
6
  import { guid } from "../../utils/guid";
7
+ import { CSS } from "./resources";
7
8
  /**
8
9
  * @slot - A slot for adding custom content.
9
10
  */
@@ -149,8 +150,26 @@ export class CalciteTileSelect {
149
150
  this.el.insertAdjacentElement("beforeend", this.input);
150
151
  }
151
152
  render() {
152
- return (h("div", { class: { focused: this.focused, root: true } },
153
- h("calcite-tile", { active: this.checked, description: this.description, embed: true, heading: this.heading, icon: this.icon }),
153
+ const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width } = this;
154
+ return (h("div", { class: {
155
+ checked,
156
+ container: true,
157
+ [CSS.description]: Boolean(description),
158
+ [CSS.descriptionOnly]: Boolean(!heading && !icon && description),
159
+ disabled,
160
+ focused,
161
+ [CSS.heading]: Boolean(heading),
162
+ [CSS.headingOnly]: heading && !icon && !description,
163
+ [CSS.icon]: Boolean(icon),
164
+ [CSS.iconOnly]: !heading && icon && !description,
165
+ [CSS.inputAlignmentEnd]: inputAlignment === "end",
166
+ [CSS.inputAlignmentStart]: inputAlignment === "start",
167
+ [CSS.inputEnabled]: inputEnabled,
168
+ [CSS.largeVisual]: heading && icon && !description,
169
+ [CSS.widthAuto]: width === "auto",
170
+ [CSS.widthFull]: width === "full"
171
+ } },
172
+ h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon }),
154
173
  h("slot", null)));
155
174
  }
156
175
  static get is() { return "calcite-tile-select"; }
@@ -0,0 +1,20 @@
1
+ /*!
2
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
3
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
4
+ */
5
+ export const CSS = {
6
+ checked: "checked",
7
+ description: "description",
8
+ descriptionOnly: "description-only",
9
+ disabled: "disabled",
10
+ heading: "heading",
11
+ headingOnly: "heading-only",
12
+ icon: "icon",
13
+ iconOnly: "icon-only",
14
+ inputAlignmentEnd: "input-alignment-end",
15
+ inputAlignmentStart: "input-alignment-start",
16
+ inputEnabled: "input-enabled",
17
+ largeVisual: "large-visual",
18
+ widthAuto: "width-auto",
19
+ widthFull: "width-full"
20
+ };
@@ -27,17 +27,24 @@ export function parseNumberString(numberString) {
27
27
  return isValidNumber(result) ? Number(result).toString() : null;
28
28
  }
29
29
  export function sanitizeDecimalString(decimalString) {
30
- return (decimalString === null || decimalString === void 0 ? void 0 : decimalString.endsWith(".")) ? decimalString.replace(".", "") : decimalString;
30
+ const decimalAtEndOfStringButNotStart = /(?!^\.)\.$/;
31
+ return decimalString.replace(decimalAtEndOfStringButNotStart, "");
31
32
  }
32
33
  export function sanitizeNegativeString(negativeString) {
33
- return negativeString.charAt(0) + negativeString.substring(1).replace(/-/g, "");
34
+ const allHyphensExceptTheStart = /(?!^-)-/g;
35
+ return negativeString.replace(allHyphensExceptTheStart, "");
34
36
  }
35
37
  export function sanitizeLeadingZeroString(zeroString) {
36
- return zeroString.replace(/^0+$/, "0");
38
+ const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
39
+ return zeroString.replace(allLeadingZerosOptionallyNegative, "$1");
37
40
  }
38
41
  export function sanitizeNumberString(value) {
39
- return value
40
- ? Number(sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)))).toString()
42
+ const sanitizedValue = sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)));
43
+ const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
44
+ return isValidNumber(sanitizedValue)
45
+ ? isNegativeDecimalOnlyZeros.test(sanitizedValue)
46
+ ? sanitizedValue
47
+ : Number(sanitizedValue).toString()
41
48
  : value;
42
49
  }
43
50
  function stringContainsNumbers(string) {
@@ -262,18 +262,19 @@ let CalciteInput = class extends HTMLElement {
262
262
  };
263
263
  this.setValue = (value, nativeEvent, committing = false) => {
264
264
  const previousValue = this.value;
265
- this.value = this.type === "number" ? sanitizeNumberString(value) : value;
266
265
  if (this.type === "number") {
267
- this.setLocalizedValue(this.value);
266
+ const sanitizedValue = sanitizeNumberString(value);
267
+ this.value = sanitizedValue;
268
+ this.setLocalizedValue(sanitizedValue);
269
+ }
270
+ else {
271
+ this.value = value;
268
272
  }
269
273
  if (nativeEvent) {
270
- if (this.type === "number") {
271
- value = sanitizeNumberString(value);
272
- }
273
274
  const calciteInputInputEvent = this.calciteInputInput.emit({
274
275
  element: this.childEl,
275
276
  nativeEvent,
276
- value
277
+ value: this.value
277
278
  });
278
279
  if (calciteInputInputEvent.defaultPrevented) {
279
280
  this.value = previousValue;
@@ -4,7 +4,6 @@
4
4
  */
5
5
  import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
6
6
  import { g as getElementProp } from './dom.js';
7
- import { c as createObserver } from './observers.js';
8
7
  import { d as defineCustomElement$2 } from './calcite-icon2.js';
9
8
 
10
9
  const SLOTS = {
@@ -33,30 +32,9 @@ let CalciteRadioGroupItem$1 = class extends HTMLElement {
33
32
  this.iconFlipRtl = false;
34
33
  /** optionally used with icon, select where to position the icon */
35
34
  this.iconPosition = "start";
36
- this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
37
35
  }
38
36
  handleCheckedChange() {
39
37
  this.calciteRadioGroupItemChange.emit();
40
- this.syncToExternalInput();
41
- }
42
- //--------------------------------------------------------------------------
43
- //
44
- // Lifecycle
45
- //
46
- //--------------------------------------------------------------------------
47
- connectedCallback() {
48
- var _a;
49
- const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
50
- if (inputProxy) {
51
- this.value = inputProxy.value;
52
- this.checked = inputProxy.checked;
53
- (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
54
- }
55
- this.inputProxy = inputProxy;
56
- }
57
- disconnectedCallback() {
58
- var _a;
59
- (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
60
38
  }
61
39
  render() {
62
40
  const { checked, value } = this;
@@ -72,29 +50,6 @@ let CalciteRadioGroupItem$1 = class extends HTMLElement {
72
50
  "label--outline": appearance === "outline"
73
51
  } }, this.icon && this.iconPosition === "start" ? iconEl : null, h("slot", null, value), h("slot", { name: SLOTS.input }), this.icon && this.iconPosition === "end" ? iconEl : null)));
74
52
  }
75
- //--------------------------------------------------------------------------
76
- //
77
- // Private Methods
78
- //
79
- //--------------------------------------------------------------------------
80
- syncFromExternalInput() {
81
- if (this.inputProxy) {
82
- this.value = this.inputProxy.value;
83
- this.checked = this.inputProxy.checked;
84
- }
85
- }
86
- syncToExternalInput() {
87
- if (!this.inputProxy) {
88
- return;
89
- }
90
- this.inputProxy.value = this.value;
91
- if (this.checked) {
92
- this.inputProxy.setAttribute("checked", "");
93
- }
94
- else {
95
- this.inputProxy.removeAttribute("checked");
96
- }
97
- }
98
53
  get el() { return this; }
99
54
  static get watchers() { return {
100
55
  "checked": ["handleCheckedChange"]