calcite-label.entry.js 5.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f9b54dc.js';
  7. import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label-333c4a4c.js';
  8. import './dom-8f0a9ff2.js';
  9. import './resources-9c476cb6.js';
  10. import './guid-9f15e57a.js';
  11. const CSS = {
  12. container: "container"
  13. };
  14. const labelCss = "@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}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host(:not([disable-spacing])[scale=s]) .container{margin-block-end:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host(:not([disable-spacing])[scale=m]) .container{margin-block-end:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:not([disable-spacing])[scale=l]) .container{margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-ui-text-1)}:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([disable-spacing]) .container{margin:0px;gap:0px}";
  15. const Label = class {
  16. constructor(hostRef) {
  17. registerInstance(this, hostRef);
  18. this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 2);
  19. //--------------------------------------------------------------------------
  20. //
  21. // Properties
  22. //
  23. //--------------------------------------------------------------------------
  24. /** Specifies the text alignment of the component. */
  25. this.alignment = "start";
  26. /**
  27. * Specifies the status of the component and any child input, or input messages.
  28. *
  29. * @deprecated Set directly on the component the label is bound to instead.
  30. */
  31. this.status = "idle";
  32. /** Specifies the size of the component. */
  33. this.scale = "m";
  34. /** Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. */
  35. this.layout = "default";
  36. /**
  37. * When `true`, interaction is prevented and the component is displayed with lower opacity.
  38. *
  39. * @deprecated Use the `disabled` property on the component the label is bound to instead.
  40. */
  41. this.disabled = false;
  42. /**
  43. * When `true`, disables the component's spacing.
  44. *
  45. * @deprecated Set the `--calcite-label-margin-bottom` css variable to `0` instead.
  46. */
  47. this.disableSpacing = false;
  48. //--------------------------------------------------------------------------
  49. //
  50. // Private Methods
  51. //
  52. //--------------------------------------------------------------------------
  53. this.labelClickHandler = (event) => {
  54. this.calciteInternalLabelClick.emit({
  55. sourceEvent: event
  56. });
  57. };
  58. }
  59. //--------------------------------------------------------------------------
  60. //
  61. // Lifecycle
  62. //
  63. //--------------------------------------------------------------------------
  64. connectedCallback() {
  65. document.dispatchEvent(new CustomEvent(labelConnectedEvent));
  66. }
  67. disconnectedCallback() {
  68. document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
  69. }
  70. render() {
  71. return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
  72. }
  73. get el() { return getElement(this); }
  74. };
  75. Label.style = labelCss;
  76. export { Label as calcite_label };