calcite-label.cjs.entry.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. 'use strict';
  7. Object.defineProperty(exports, '__esModule', { value: true });
  8. const index = require('./index-a0010f96.js');
  9. const label = require('./label-28060b83.js');
  10. require('./dom-2ec8c9ed.js');
  11. require('./resources-b5a5f8a7.js');
  12. require('./guid-f4f03a7a.js');
  13. const CSS = {
  14. container: "container"
  15. };
  16. 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}";
  17. const Label = class {
  18. constructor(hostRef) {
  19. index.registerInstance(this, hostRef);
  20. this.calciteInternalLabelClick = index.createEvent(this, "calciteInternalLabelClick", 2);
  21. //--------------------------------------------------------------------------
  22. //
  23. // Properties
  24. //
  25. //--------------------------------------------------------------------------
  26. /** Specifies the text alignment of the component. */
  27. this.alignment = "start";
  28. /**
  29. * Specifies the status of the component and any child input, or input messages.
  30. *
  31. * @deprecated Set directly on the component the label is bound to instead.
  32. */
  33. this.status = "idle";
  34. /** Specifies the size of the component. */
  35. this.scale = "m";
  36. /** Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. */
  37. this.layout = "default";
  38. /**
  39. * When `true`, interaction is prevented and the component is displayed with lower opacity.
  40. *
  41. * @deprecated Use the `disabled` property on the component the label is bound to instead.
  42. */
  43. this.disabled = false;
  44. /**
  45. * When `true`, disables the component's spacing.
  46. *
  47. * @deprecated Set the `--calcite-label-margin-bottom` css variable to `0` instead.
  48. */
  49. this.disableSpacing = false;
  50. //--------------------------------------------------------------------------
  51. //
  52. // Private Methods
  53. //
  54. //--------------------------------------------------------------------------
  55. this.labelClickHandler = (event) => {
  56. this.calciteInternalLabelClick.emit({
  57. sourceEvent: event
  58. });
  59. };
  60. }
  61. //--------------------------------------------------------------------------
  62. //
  63. // Lifecycle
  64. //
  65. //--------------------------------------------------------------------------
  66. connectedCallback() {
  67. document.dispatchEvent(new CustomEvent(label.labelConnectedEvent));
  68. }
  69. disconnectedCallback() {
  70. document.dispatchEvent(new CustomEvent(label.labelDisconnectedEvent));
  71. }
  72. render() {
  73. return (index.h(index.Host, { onClick: this.labelClickHandler }, index.h("div", { class: CSS.container }, index.h("slot", null))));
  74. }
  75. get el() { return index.getElement(this); }
  76. };
  77. Label.style = labelCss;
  78. exports.calcite_label = Label;