calcite-combobox-item-group.js 5.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. * v1.0.0-beta.97
  5. */
  6. import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
  7. import { d as getAncestors, e as getDepth } from './utils2.js';
  8. import { g as guid } from './guid.js';
  9. import { g as getElementProp } from './dom.js';
  10. const CSS = {
  11. list: "list",
  12. label: "label",
  13. title: "title"
  14. };
  15. const comboboxItemGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent-1:0.5rem;--calcite-combobox-item-spacing-indent-2:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent-1:0.75rem;--calcite-combobox-item-spacing-indent-2:1.5rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent-1:1rem;--calcite-combobox-item-spacing-indent-2:2rem}:host,.list{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%;color:var(--calcite-ui-text-3)}.label--indent-1{padding-inline-start:var(--calcite-combobox-item-spacing-indent-1)}.label--indent-2{padding-inline-start:var(--calcite-combobox-item-spacing-indent-2)}.title{border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2);word-wrap:break-word;word-break:break-word;border-block-end-color:var(--calcite-ui-border-3);padding-block:var(--calcite-combobox-item-spacing-unit-l);padding-inline:0;margin-inline:var(--calcite-combobox-item-spacing-unit-s)}";
  16. const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  17. constructor() {
  18. super();
  19. this.__registerHost();
  20. this.__attachShadow();
  21. this.guid = guid();
  22. this.scale = "m";
  23. }
  24. // --------------------------------------------------------------------------
  25. //
  26. // Lifecycle
  27. //
  28. // --------------------------------------------------------------------------
  29. connectedCallback() {
  30. this.ancestors = getAncestors(this.el);
  31. this.scale = getElementProp(this.el, "scale", this.scale);
  32. }
  33. // --------------------------------------------------------------------------
  34. //
  35. // Render Methods
  36. //
  37. // --------------------------------------------------------------------------
  38. render() {
  39. const { el, scale } = this;
  40. const indent = `${CSS.label}--indent-${getDepth(el)}`;
  41. return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
  42. }
  43. get el() { return this; }
  44. static get style() { return comboboxItemGroupCss; }
  45. }, [1, "calcite-combobox-item-group", {
  46. "ancestors": [1040],
  47. "label": [1]
  48. }]);
  49. function defineCustomElement$1() {
  50. if (typeof customElements === "undefined") {
  51. return;
  52. }
  53. const components = ["calcite-combobox-item-group"];
  54. components.forEach(tagName => { switch (tagName) {
  55. case "calcite-combobox-item-group":
  56. if (!customElements.get(tagName)) {
  57. customElements.define(tagName, ComboboxItemGroup);
  58. }
  59. break;
  60. } });
  61. }
  62. defineCustomElement$1();
  63. const CalciteComboboxItemGroup = ComboboxItemGroup;
  64. const defineCustomElement = defineCustomElement$1;
  65. export { CalciteComboboxItemGroup, defineCustomElement };