@tylertech/forge 3.0.0-next.22 → 3.0.0-next.24

package/esm/color-picker/color-picker.js

@@ -14,7 +14,7 @@ import { ColorPickerAdapter } from './color-picker-adapter';
 import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
 import { ColorPickerFoundation } from './color-picker-foundation';
 const template = '<template><div class=\"forge-color-picker\" part=\"root\"><input type=\"color\" tabindex=\"-1\" class=\"forge-color-picker__input\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"Color picker value\" part=\"input\"><div class=\"forge-color-picker__container\" part=\"container\"><div class=\"forge-color-picker__gradient\" tabindex=\"0\" part=\"gradient\"><div class=\"forge-color-picker__gradient-color\" part=\"gradient-color\"></div><div class=\"forge-color-picker__gradient-thumb\" part=\"gradient-thumb\"></div></div><div class=\"forge-color-picker__control-preview\" part=\"controls-preview-container\"><div class=\"forge-color-picker__controls\" part=\"controls-container\"><div class=\"forge-color-picker__slider-control\" part=\"hue-control-container\"><div class=\"forge-color-picker__slider forge-color-picker__hue-slider\" part=\"hue-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-hue-thumb\" part=\"hue-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change hue\" aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div><div class=\"forge-color-picker__slider-control\" part=\"opacity-control-container\"><div class=\"forge-color-picker__canvas\" part=\"opacity-control-canvas\"><div class=\"forge-color-picker__slider forge-color-picker__opacity-slider\" part=\"opacity-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-opacity-thumb\" part=\"opacity-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change opacity\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div></div></div><div class=\"forge-color-picker__color-preview-container forge-color-picker__canvas\" part=\"color-preview-container\"><div class=\"forge-color-picker__color-preview\" part=\"color-preview\"></div></div></div><div class=\"forge-color-picker__value\" part=\"value-container\"><div class=\"forge-color-picker__color-types\" part=\"types-container\"><div class=\"forge-color-picker__color-hex\" part=\"hex-type-container\"><div part=\"hex-type-label-wrapper\"><label for=\"forge-color-picker-hex-input\" part=\"hex-label\">HEX</label></div><input type=\"text\" id=\"forge-color-picker-hex-input\" part=\"hex-input\" style=\"width: 88px;\" maxlength=\"9\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"HEX value\"></div><div class=\"forge-color-picker__color-rgba\" part=\"rgba-type-container\"><div part=\"rgba-type-wrapper-r\"><label for=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-label-r\">R</label> <input type=\"number\" id=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-input-r\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Red\"></div><div part=\"rgba-type-wrapper-g\"><label for=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-label-g\">G</label> <input type=\"number\" id=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-input-g\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Green\"></div><div part=\"rgba-type-wrapper-b\"><label for=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-label-b\">B</label> <input type=\"number\" id=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-input-b\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Blue\"></div><div part=\"rgba-type-wrapper-a\"><label for=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div><div class=\"forge-color-picker__color-hsva\" part=\"hsva-type-container\"><div part=\"hsva-type-wrapper-h\"><label for=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-label-h\">H</label> <input type=\"number\" id=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-input-h\" min=\"0\" max=\"360\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Hue\"></div><div part=\"hsva-type-wrapper-s\"><label for=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-label-s\">S</label> <input type=\"number\" id=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-input-s\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Saturation\"></div><div part=\"hsva-type-wrapper-v\"><label for=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-label-v\">V</label> <input type=\"number\" id=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-input-v\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Value\"></div><div part=\"hsva-type-wrapper-a\"><label for=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div></div><div class=\"forge-color-picker__type-button\" part=\"type-container\"><forge-icon-button part=\"type-button\" id=\"forge-color-picker-type-button\" aria-labelledby=\"type-button-tooltip\" part=\"type-button-element\"><forge-icon name=\"unfold_more\" part=\"type-button-icon\"></forge-icon></forge-icon-button><forge-tooltip placement=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></div></div></div></div></template>';
-const styles = '*{-webkit-box-sizing:border-box;box-sizing:border-box}.forge-color-picker{width:272px;width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(#000)),-webkit-gradient(linear,left top,right top,color-stop(0,#fff),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{-webkit-box-flex:1;flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;-webkit-transition:left .4s cubic-bezier(.25, .8, .25, 1);transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{-webkit-transition:none;transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;-webkit-transition:background-color .2s cubic-bezier(.25, .8, .25, 1);transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{-webkit-box-flex:1;flex:1}.forge-color-picker__color-types label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))}.forge-color-picker__color-types input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{color:#000;color:var(--mdc-theme-on-surface,#000);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);-webkit-box-shadow:0 0 0 1px inset #3f51b5;box-shadow:0 0 0 1px inset #3f51b5;-webkit-box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center;-moz-appearance:textfield}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.forge-color-picker__color-hex{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:space-between;align-items:space-between}.forge-color-picker__canvas{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\")}.forge-color-picker__hue-slider{height:8px;background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),to(#ff0004));background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,0)),to(red));background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:-webkit-box;display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
+const styles = '*{-webkit-box-sizing:border-box;box-sizing:border-box}.forge-color-picker{width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(#000)),-webkit-gradient(linear,left top,right top,color-stop(0,#fff),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{-webkit-box-flex:1;flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;-webkit-transition:left .4s cubic-bezier(.25, .8, .25, 1);transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{-webkit-transition:none;transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;-webkit-transition:background-color .2s cubic-bezier(.25, .8, .25, 1);transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{-webkit-box-flex:1;flex:1}.forge-color-picker__color-types label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label2-text-decoration,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-color-picker__color-types input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label2-text-decoration,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{border-color:var(--forge-theme-outline,#e0e0e0);color:var(--forge-theme-on-surface,#000);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-transition-property:border-colo,-webkit-box-shadow;transition-property:border-colo,-webkit-box-shadow;transition-property:box-shadow,border-colo;transition-property:box-shadow,border-colo,-webkit-box-shadow;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms);-webkit-transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:var(--forge-theme-text-high,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:var(--forge-theme-primary,#3f51b5);-webkit-box-shadow:0 0 0 1px inset var(--forge-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--forge-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center;-moz-appearance:textfield}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.forge-color-picker__color-hex{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:space-between;align-items:space-between}.forge-color-picker__canvas{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\")}.forge-color-picker__hue-slider{height:8px;background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),to(#ff0004));background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,0)),to(red));background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:-webkit-box;display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-color-picker>` custom element.
  *

package/esm/deprecated/icon-button/deprecated-icon-button-component-delegate.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../../core/delegates/base-component-delegate';
+import { IIconComponent } from '../../icon/icon';
+import { IconExternalType } from '../../icon/icon-constants';
+import { TooltipPlacement } from '../../tooltip/tooltip-constants';
+import { IDeprecatedIconButtonComponent } from './deprecated-icon-button';
+export type DeprecatedIconButtonComponentDelegateProps = Partial<IDeprecatedIconButtonComponent>;
+export interface IDeprecatedIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
+    iconName?: string;
+    iconExternal?: boolean;
+    iconExternalType?: IconExternalType;
+    iconType?: 'font' | 'component';
+    iconClass?: string | string[];
+    tooltip?: string;
+    tooltipPosition?: TooltipPlacement;
+}
+export interface IDeprecatedIconButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IDeprecatedIconButtonComponent, IDeprecatedIconButtonComponentDelegateOptions> {
+}
+export declare class DeprecatedIconButtonComponentDelegate extends BaseComponentDelegate<IDeprecatedIconButtonComponent, IDeprecatedIconButtonComponentDelegateOptions> {
+    private _buttonElement?;
+    private _iconElement?;
+    constructor(config?: IDeprecatedIconButtonComponentDelegateConfig);
+    destroy(): void;
+    get buttonElement(): HTMLButtonElement | undefined;
+    protected _build(): IDeprecatedIconButtonComponent;
+    onClick(listener: EventListener): void;
+    onFocus(listener: EventListener): void;
+    onBlur(listener: EventListener): void;
+    get iconElement(): IIconComponent | undefined;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _configure(): void;
+    private _configureIcon;
+}

package/esm/deprecated/icon-button/deprecated-icon-button-component-delegate.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICON_CLASS_NAME } from '../../constants';
+import { BaseComponentDelegate } from '../../core/delegates/base-component-delegate';
+import { ICON_CONSTANTS } from '../../icon/icon-constants';
+import { DEPRECATED_ICON_BUTTON_CONSTANTS } from './deprecated-icon-button-constants';
+export class DeprecatedIconButtonComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    destroy() {
+        this._buttonElement = undefined;
+    }
+    get buttonElement() {
+        return this._buttonElement;
+    }
+    _build() {
+        var _a;
+        const component = document.createElement(DEPRECATED_ICON_BUTTON_CONSTANTS.elementName);
+        this._buttonElement = document.createElement('button');
+        this._buttonElement.type = 'button';
+        component.appendChild(this._buttonElement);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.tooltip) {
+            const tooltip = document.createElement('forge-tooltip');
+            tooltip.textContent = this._config.options.tooltip;
+            if (this._config.options.tooltipPosition) {
+                tooltip.position = this._config.options.tooltipPosition;
+            }
+            component.appendChild(tooltip);
+        }
+        return component;
+    }
+    onClick(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+    }
+    onFocus(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', listener);
+    }
+    onBlur(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', listener);
+    }
+    get iconElement() {
+        return this._iconElement;
+    }
+    get disabled() {
+        var _a;
+        return !!((_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.disabled);
+    }
+    set disabled(value) {
+        if (this._buttonElement) {
+            this._buttonElement.disabled = value;
+        }
+    }
+    _configure() {
+        this._configureIcon();
+    }
+    _configureIcon() {
+        var _a, _b, _c, _d;
+        if (!((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.iconName)) {
+            return;
+        }
+        const type = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.iconType) || 'component';
+        switch (type) {
+            case 'font':
+                const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
+                (_c = this._buttonElement) === null || _c === void 0 ? void 0 : _c.classList.add(...classes);
+                if (this._buttonElement) {
+                    this._buttonElement.textContent = this._config.options.iconName;
+                }
+                break;
+            case 'component':
+                this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
+                this._iconElement.name = this._config.options.iconName;
+                if (this._config.options.iconExternal !== undefined) {
+                    this._iconElement.external = !!this._config.options.iconExternal;
+                }
+                if (this._config.options.iconExternalType) {
+                    this._iconElement.externalType = this._config.options.iconExternalType;
+                }
+                if (this._config.options.iconClass) {
+                    this._iconElement.classList.add(...this._config.options.iconClass);
+                }
+                (_d = this._buttonElement) === null || _d === void 0 ? void 0 : _d.appendChild(this._iconElement);
+                break;
+        }
+    }
+}

package/esm/deprecated/icon-button/deprecated-icon-button-constants.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const DEPRECATED_ICON_BUTTON_CONSTANTS: {
+    elementName: "forge-deprecated-icon-button";
+    observedAttributes: {
+        DISABLED: string;
+        TOGGLE: string;
+        IS_ON: string;
+        DENSITY_LEVEL: string;
+    };
+    attributes: {
+        ON_ICON: string;
+        DISABLED: string;
+        TOGGLE: string;
+        IS_ON: string;
+        DENSITY_LEVEL: string;
+    };
+    selectors: {
+        BUTTON: string;
+        ICON_LIKE: string;
+    };
+    events: {
+        TOGGLE: string;
+    };
+};

package/esm/deprecated/icon-button/deprecated-icon-button-constants.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}deprecated-icon-button`;
+const observedAttributes = {
+    DISABLED: 'disabled',
+    TOGGLE: 'toggle',
+    IS_ON: 'is-on',
+    DENSITY_LEVEL: 'density-level'
+};
+const attributes = Object.assign(Object.assign({}, observedAttributes), { ON_ICON: 'forge-icon-button-on' });
+const selectors = {
+    BUTTON: 'button,a',
+    ICON_LIKE: 'button > i,span,svg,img,forge-icon'
+};
+const events = {
+    TOGGLE: 'forge-icon-button-toggle'
+};
+export const DEPRECATED_ICON_BUTTON_CONSTANTS = {
+    elementName,
+    observedAttributes,
+    attributes,
+    selectors,
+    events
+};

package/esm/deprecated/icon-button/deprecated-icon-button.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+/**
+ * @deprecated Use `IIconButtonComponent` component instead.
+ */
+export interface IDeprecatedIconButtonComponent extends IBaseComponent {
+    disabled: boolean;
+    toggle: boolean;
+    isOn: boolean;
+    densityLevel: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-deprecated-icon-button': IDeprecatedIconButtonComponent;
+    }
+}
+/**
+ * @tag forge-deprecated-icon-button
+ *
+ * @deprecated Use the `<forge-icon-button>` element instead.
+ */
+export declare class DeprecatedIconButtonComponent extends BaseComponent implements IDeprecatedIconButtonComponent {
+    static get observedAttributes(): string[];
+    private _disabled;
+    private _toggle;
+    private _isOn;
+    private _densityLevel;
+    private _slotElement;
+    private _focusIndicator;
+    private _stateLayer;
+    private _buttonOrAnchorElement;
+    private _slotChangeListener;
+    private _buttonAttrMutationObserver;
+    private _keydownListener;
+    private _toggleClickListener;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _onKeydown;
+    private _onSlotChange;
+    private _onToggle;
+    private _initialize;
+    private _syncDisabledState;
+    private _detachButton;
+    private _initializeToggle;
+    private _destroyToggle;
+    private _syncToggleState;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get toggle(): boolean;
+    set toggle(value: boolean);
+    get isOn(): boolean;
+    set isOn(value: boolean);
+    get densityLevel(): number;
+    set densityLevel(value: number);
+    focus(options?: FocusOptions | undefined): void;
+}

package/esm/deprecated/icon-button/deprecated-icon-button.js

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, ensureChildren, getShadowElement } from '@tylertech/forge-core';
+import { FocusIndicatorComponent, FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { StateLayerComponent, STATE_LAYER_CONSTANTS } from '../../state-layer';
+import { DEPRECATED_ICON_BUTTON_CONSTANTS } from './deprecated-icon-button-constants';
+import { BaseComponent } from '../../core/base/base-component';
+import { IconComponent } from '../../icon/icon';
+const template = '<template><slot></slot><forge-focus-indicator part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></template>';
+const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, var(--forge-shape-full, 9999px));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, var(--forge-shape-medium, 4px));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed);--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent;border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end)}:host([hidden]){display:none}::slotted(:is(button,a)){position:relative;z-index:0;display:var(--_icon-button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_icon-button-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);-webkit-box-shadow:var(--_icon-button-shadow);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_icon-button-transition-duration);transition-duration:var(--_icon-button-transition-duration);-webkit-transition-timing-function:var(--_icon-button-transition-timing);transition-timing-function:var(--_icon-button-transition-timing);font-size:var(--_icon-button-icon-size);height:var(--_icon-button-size);width:var(--_icon-button-size)}::slotted(a){text-decoration:none;color:var(--_icon-button-icon-color)!important}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}forge-focus-indicator{--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([dense],[density=large]):not(:is([density=medium],[density-level]))){--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding);--forge-icon-font-size:var(--_icon-button-icon-size)}:host([dense]:not([density=large]):not([density=small]):is([density=medium],[density-level])){--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([toggle]:is([on],[is-on]):not([is-on=false])){--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color);--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-primary-container-low, #e8eaf6))}';
+/**
+ * @tag forge-deprecated-icon-button
+ *
+ * @deprecated Use the `<forge-icon-button>` element instead.
+ */
+let DeprecatedIconButtonComponent = class DeprecatedIconButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes);
+    }
+    constructor() {
+        super();
+        // State
+        this._disabled = false;
+        this._toggle = false;
+        this._isOn = false;
+        this._densityLevel = 0;
+        this._buttonOrAnchorElement = null;
+        // Listeners
+        this._slotChangeListener = this._onSlotChange.bind(this);
+        this._keydownListener = this._onKeydown.bind(this);
+        this._toggleClickListener = this._onToggle.bind(this);
+        attachShadowTemplate(this, template, styles);
+        this._slotElement = getShadowElement(this, 'slot:not([name])');
+        this._focusIndicator = getShadowElement(this, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayer = getShadowElement(this, STATE_LAYER_CONSTANTS.elementName);
+    }
+    connectedCallback() {
+        this._slotElement.addEventListener('slotchange', this._slotChangeListener);
+        if (this.children.length) {
+            this._initialize();
+        }
+        else {
+            ensureChildren(this).then(() => this._initialize());
+        }
+    }
+    disconnectedCallback() {
+        this._detachButton();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
+                this.toggle = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.IS_ON:
+                this.isOn = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL:
+                this.densityLevel = coerceNumber(newValue);
+                return;
+        }
+    }
+    _onKeydown(evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            this._stateLayer.playAnimation();
+        }
+    }
+    _onSlotChange() {
+        this._detachButton();
+        this._initialize();
+    }
+    _onToggle() {
+        this.isOn = !this._isOn;
+        this.dispatchEvent(new CustomEvent(DEPRECATED_ICON_BUTTON_CONSTANTS.events.TOGGLE, { bubbles: true, composed: true, detail: this._isOn }));
+    }
+    _initialize() {
+        this._buttonOrAnchorElement = this.querySelector(DEPRECATED_ICON_BUTTON_CONSTANTS.selectors.BUTTON);
+        if (!this._buttonOrAnchorElement) {
+            return;
+        }
+        this._stateLayer.targetElement = this._buttonOrAnchorElement;
+        this._focusIndicator.targetElement = this._buttonOrAnchorElement;
+        this._buttonOrAnchorElement.addEventListener('keydown', this._keydownListener);
+        // Sync disabled state
+        if (this._buttonOrAnchorElement instanceof HTMLButtonElement && this._disabled && !this._buttonOrAnchorElement.disabled) {
+            this._buttonOrAnchorElement.disabled = true;
+        }
+        else {
+            this.disabled = this._buttonOrAnchorElement instanceof HTMLButtonElement && this._buttonOrAnchorElement.disabled;
+        }
+        if (this._toggle) {
+            this._initializeToggle();
+        }
+        // Listen for disabled attribute changes on the button
+        if (this._buttonOrAnchorElement instanceof HTMLButtonElement) {
+            this._buttonAttrMutationObserver = new MutationObserver(mutationList => {
+                if (mutationList.some(mutation => mutation.attributeName === 'disabled')) {
+                    this._syncDisabledState();
+                }
+            });
+            this._buttonAttrMutationObserver.observe(this._buttonOrAnchorElement, { attributes: true, attributeFilter: ['disabled'] });
+        }
+    }
+    _syncDisabledState() {
+        const isDisabled = this._buttonOrAnchorElement instanceof HTMLButtonElement && this._buttonOrAnchorElement.disabled;
+        this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED, isDisabled);
+    }
+    _detachButton() {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._keydownListener);
+        if (this._buttonAttrMutationObserver) {
+            this._buttonAttrMutationObserver.disconnect();
+            this._buttonAttrMutationObserver = undefined;
+        }
+    }
+    _initializeToggle() {
+        /* c8 ignore next 3 */
+        if (!this._buttonOrAnchorElement) {
+            return;
+        }
+        this._buttonOrAnchorElement.addEventListener('click', this._toggleClickListener);
+        this._syncToggleState();
+    }
+    _destroyToggle() {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this._toggleClickListener);
+    }
+    _syncToggleState() {
+        const iconLikeElements = Array.from(this.querySelectorAll(DEPRECATED_ICON_BUTTON_CONSTANTS.selectors.ICON_LIKE));
+        const onIconElement = iconLikeElements.find(el => el.hasAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.ON_ICON));
+        const offIconElements = iconLikeElements.filter(el => el !== onIconElement);
+        onIconElement === null || onIconElement === void 0 ? void 0 : onIconElement.toggleAttribute('hidden', !this._isOn);
+        offIconElements.forEach(el => el.toggleAttribute('hidden', this._isOn));
+        this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.IS_ON, this._isOn);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        var _a;
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+            this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get toggle() {
+        return this._toggle;
+    }
+    set toggle(value) {
+        value = Boolean(value);
+        if (this._toggle !== value) {
+            this._toggle = value;
+            if (this.isConnected) {
+                if (this._toggle) {
+                    this._initializeToggle();
+                }
+                else {
+                    this._destroyToggle();
+                }
+            }
+            this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.TOGGLE, this._toggle);
+        }
+    }
+    get isOn() {
+        return this._isOn;
+    }
+    set isOn(value) {
+        value = Boolean(value);
+        if (this._isOn !== value) {
+            this._isOn = value;
+            if (this.isConnected) {
+                this._syncToggleState();
+            }
+        }
+    }
+    get densityLevel() {
+        return this._densityLevel;
+    }
+    set densityLevel(value) {
+        if (this._densityLevel !== value) {
+            this._densityLevel = value;
+            this.setAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL, String(this._densityLevel));
+        }
+    }
+    focus(options) {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+};
+DeprecatedIconButtonComponent = __decorate([
+    CustomElement({
+        name: DEPRECATED_ICON_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            IconComponent,
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
+    })
+], DeprecatedIconButtonComponent);
+export { DeprecatedIconButtonComponent };

package/esm/deprecated/icon-button/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './deprecated-icon-button';
+export * from './deprecated-icon-button-component-delegate';
+export * from './deprecated-icon-button-constants';
+/**
+ * @deprecated Use `defineIconButtonComponent()` instead for the `<forge-icon-button>` element.
+ */
+export declare function defineDeprecatedIconButtonComponent(): void;

package/esm/deprecated/icon-button/index.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { DeprecatedIconButtonComponent } from './deprecated-icon-button';
+export * from './deprecated-icon-button';
+export * from './deprecated-icon-button-component-delegate';
+export * from './deprecated-icon-button-constants';
+/**
+ * @deprecated Use `defineIconButtonComponent()` instead for the `<forge-icon-button>` element.
+ */
+export function defineDeprecatedIconButtonComponent() {
+    defineCustomElement(DeprecatedIconButtonComponent);
+}