@emuanalytics/flow-rdf-ui 0.0.33 → 0.0.34

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.
package/dist/index.mjs CHANGED
@@ -3237,8 +3237,11 @@ const buttonStyles = css`
3237
3237
  white-space: nowrap;
3238
3238
  vertical-align: middle;
3239
3239
  padding: 0;
3240
- transition: var(--flow-ui-transition-x-fast) background-color, var(--flow-ui-transition-x-fast) color,
3241
- var(--flow-ui-transition-x-fast) border, var(--flow-ui-transition-x-fast) box-shadow;
3240
+ transition:
3241
+ var(--flow-ui-transition-x-fast) background-color,
3242
+ var(--flow-ui-transition-x-fast) color,
3243
+ var(--flow-ui-transition-x-fast) border,
3244
+ var(--flow-ui-transition-x-fast) box-shadow;
3242
3245
  cursor: inherit;
3243
3246
  }
3244
3247
 
@@ -3622,35 +3625,51 @@ const buttonStyles = css`
3622
3625
  }
3623
3626
 
3624
3627
  /*
3625
- * Circle modifier
3628
+ * FAB modifier
3626
3629
  */
3627
3630
 
3628
- .button--circle {
3631
+ .button--fab {
3629
3632
  padding-left: 0;
3630
3633
  padding-right: 0;
3631
3634
  }
3632
3635
 
3633
- .button--circle.button--small {
3636
+ .button--fab.button--small {
3634
3637
  width: var(--flow-ui-input-height-small);
3635
- border-radius: 50%;
3638
+ box-shadow: var(--flow-ui-shadow-small);
3636
3639
  }
3637
3640
 
3638
- .button--circle.button--medium {
3641
+ .button--fab.button--medium {
3639
3642
  width: var(--flow-ui-input-height-medium);
3640
- border-radius: 50%;
3643
+ box-shadow: var(--flow-ui-shadow-medium);
3641
3644
  }
3642
3645
 
3643
- .button--circle.button--large {
3646
+ .button--fab.button--large {
3644
3647
  width: var(--flow-ui-input-height-large);
3645
- border-radius: 50%;
3648
+ box-shadow: var(--flow-ui-shadow-large);
3646
3649
  }
3647
3650
 
3648
- .button--circle .button__prefix,
3649
- .button--circle .button__suffix,
3650
- .button--circle .button__caret {
3651
+ .button--fab .button__prefix,
3652
+ .button--fab .button__suffix,
3653
+ .button--fab .button__caret {
3651
3654
  display: none;
3652
3655
  }
3653
3656
 
3657
+ .button--circle {
3658
+ border-radius: 50%;
3659
+ }
3660
+
3661
+ .button--square.button--small {
3662
+ border-radius: var(--flow-ui-border-radius-small);
3663
+ }
3664
+
3665
+ .button--square.button--medium {
3666
+ border-radius: var(--flow-ui-border-radius-medium);
3667
+ }
3668
+
3669
+ .button--square.button--large {
3670
+ border-radius: var(--flow-ui-border-radius-large);
3671
+ }
3672
+
3654
3673
  /*
3655
3674
  * Caret modifier
3656
3675
  */
@@ -3784,7 +3803,12 @@ const buttonStyles = css`
3784
3803
  * buttons and we style them here instead.
3785
3804
  */
3786
3805
 
3787
- :host(.flow-ui-button-group__button--first:not(.flow-ui-button-group__button--last):not(.flow-ui-button-group__button--vertical)) .button {
3806
+ :host(
3807
+ .flow-ui-button-group__button--first:not(.flow-ui-button-group__button--last):not(
3808
+ .flow-ui-button-group__button--vertical
3809
+ )
3810
+ )
3811
+ .button {
3788
3812
  border-start-end-radius: 0;
3789
3813
  border-end-end-radius: 0;
3790
3814
  }
@@ -3793,13 +3817,21 @@ const buttonStyles = css`
3793
3817
  border-radius: 0;
3794
3818
  }
3795
3819
 
3796
- :host(.flow-ui-button-group__button--last:not(.flow-ui-button-group__button--vertical, .flow-ui-button-group__button--first)) .button {
3820
+ :host(
3821
+ .flow-ui-button-group__button--last:not(
3822
+ .flow-ui-button-group__button--vertical,
3823
+ .flow-ui-button-group__button--first
3824
+ )
3825
+ )
3826
+ .button {
3797
3827
  border-start-start-radius: 0;
3798
3828
  border-end-start-radius: 0;
3799
3829
  }
3800
3830
 
3801
3831
  /* All except the first */
3802
- :host(.flow-ui-button-group__button:not(.flow-ui-button-group__button--vertical, .flow-ui-button-group__button--first)) {
3832
+ :host(
3833
+ .flow-ui-button-group__button:not(.flow-ui-button-group__button--vertical, .flow-ui-button-group__button--first)
3834
+ ) {
3803
3835
  margin-inline-start: calc(-1 * var(--flow-ui-input-border-width));
3804
3836
  }
3805
3837
 
@@ -3809,8 +3841,7 @@ const buttonStyles = css`
3809
3841
  .flow-ui-button-group__button--first,
3810
3842
  .flow-ui-button-group__button--radio,
3811
3843
  .flow-ui-button-group__button--tool,
3812
- .flow-ui-button-group__button--vertical
3813
- [variant='default']
3844
+ .flow-ui-button-group__button--vertical [variant='default']
3814
3845
  ):not(:hover)
3815
3846
  )
3816
3847
  .button:after {
@@ -3824,7 +3855,12 @@ const buttonStyles = css`
3824
3855
  }
3825
3856
 
3826
3857
  /* Variants for vertical layout of button group */
3827
- :host(.flow-ui-button-group__button--vertical.flow-ui-button-group__button--first:not(.flow-ui-button-group__button--last)) .button {
3858
+ :host(
3859
+ .flow-ui-button-group__button--vertical.flow-ui-button-group__button--first:not(
3860
+ .flow-ui-button-group__button--last
3861
+ )
3862
+ )
3863
+ .button {
3828
3864
  border-end-start-radius: 0;
3829
3865
  border-end-end-radius: 0;
3830
3866
  }
@@ -3838,7 +3874,6 @@ const buttonStyles = css`
3838
3874
  margin-block-start: calc(-1 * var(--flow-ui-input-border-width));
3839
3875
  }
3840
3876
 
3841
-
3842
3877
  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
3843
3878
  :host(.flow-ui-button-group__button--hover) {
3844
3879
  z-index: 1;
@@ -3849,7 +3884,8 @@ const buttonStyles = css`
3849
3884
  z-index: 2;
3850
3885
  }
3851
3886
 
3852
- :host(.flow-ui-button-group__button--focus), :host(.flow-ui-button-group__button--focus[checked]) {
3887
+ :host(.flow-ui-button-group__button--focus),
3888
+ :host(.flow-ui-button-group__button--focus[checked]) {
3853
3889
  z-index: 3;
3854
3890
  }
3855
3891
  `;
@@ -3865,7 +3901,7 @@ var __decorateClass$R = (decorators, target, key, kind) => {
3865
3901
  __defProp$R(target, key, result);
3866
3902
  return result;
3867
3903
  };
3868
- let FlowButton = class extends FlowRdfElement {
3904
+ let FlowButton$1 = class FlowButton extends FlowRdfElement {
3869
3905
  constructor() {
3870
3906
  super(...arguments);
3871
3907
  this.formControlController = new FormControlController(this, {
@@ -3891,7 +3927,8 @@ let FlowButton = class extends FlowRdfElement {
3891
3927
  this.loading = false;
3892
3928
  this.outline = false;
3893
3929
  this.pill = false;
3894
- this.circle = false;
3930
+ this.fabCircle = false;
3931
+ this.fabSquare = false;
3895
3932
  this.type = "button";
3896
3933
  this.name = "";
3897
3934
  this.value = "";
@@ -4020,7 +4057,9 @@ let FlowButton = class extends FlowRdfElement {
4020
4057
  "button--medium": this.size === "medium",
4021
4058
  "button--large": this.size === "large",
4022
4059
  "button--caret": this.caret,
4023
- "button--circle": this.circle,
4060
+ "button--fab": this.fabCircle || this.fabSquare,
4061
+ "button--circle": this.fabCircle,
4062
+ "button--square": this.fabSquare,
4024
4063
  "button--disabled": this.disabled,
4025
4064
  "button--focused": this.hasFocus,
4026
4065
  "button--loading": this.loading,
@@ -4062,88 +4101,94 @@ let FlowButton = class extends FlowRdfElement {
4062
4101
  `;
4063
4102
  }
4064
4103
  };
4065
- FlowButton.styles = buttonStyles;
4104
+ FlowButton$1.styles = buttonStyles;
4066
4105
  __decorateClass$R([
4067
4106
  query(".button")
4068
- ], FlowButton.prototype, "button", 2);
4107
+ ], FlowButton$1.prototype, "button", 2);
4069
4108
  __decorateClass$R([
4070
4109
  state()
4071
- ], FlowButton.prototype, "hasFocus", 2);
4110
+ ], FlowButton$1.prototype, "hasFocus", 2);
4072
4111
  __decorateClass$R([
4073
4112
  state()
4074
- ], FlowButton.prototype, "invalid", 2);
4113
+ ], FlowButton$1.prototype, "invalid", 2);
4075
4114
  __decorateClass$R([
4076
4115
  property()
4077
- ], FlowButton.prototype, "title", 2);
4116
+ ], FlowButton$1.prototype, "title", 2);
4078
4117
  __decorateClass$R([
4079
4118
  property({ reflect: true })
4080
- ], FlowButton.prototype, "variant", 2);
4119
+ ], FlowButton$1.prototype, "variant", 2);
4081
4120
  __decorateClass$R([
4082
4121
  property({ reflect: true })
4083
- ], FlowButton.prototype, "size", 2);
4122
+ ], FlowButton$1.prototype, "size", 2);
4084
4123
  __decorateClass$R([
4085
4124
  property({ type: Boolean, reflect: true })
4086
- ], FlowButton.prototype, "caret", 2);
4125
+ ], FlowButton$1.prototype, "caret", 2);
4087
4126
  __decorateClass$R([
4088
4127
  property({ type: Boolean, reflect: true })
4089
- ], FlowButton.prototype, "disabled", 2);
4128
+ ], FlowButton$1.prototype, "disabled", 2);
4090
4129
  __decorateClass$R([
4091
4130
  property({ type: Boolean, reflect: true })
4092
- ], FlowButton.prototype, "loading", 2);
4131
+ ], FlowButton$1.prototype, "loading", 2);
4093
4132
  __decorateClass$R([
4094
4133
  property({ type: Boolean, reflect: true })
4095
- ], FlowButton.prototype, "outline", 2);
4134
+ ], FlowButton$1.prototype, "outline", 2);
4096
4135
  __decorateClass$R([
4097
4136
  property({ type: Boolean, reflect: true })
4098
- ], FlowButton.prototype, "pill", 2);
4137
+ ], FlowButton$1.prototype, "pill", 2);
4099
4138
  __decorateClass$R([
4100
- property({ type: Boolean, reflect: true })
4101
- ], FlowButton.prototype, "circle", 2);
4139
+ property({ type: Boolean, reflect: true, attribute: "fab-circle" })
4140
+ ], FlowButton$1.prototype, "fabCircle", 2);
4141
+ __decorateClass$R([
4142
+ property({ type: Boolean, reflect: true, attribute: "fab-square" })
4143
+ ], FlowButton$1.prototype, "fabSquare", 2);
4102
4144
  __decorateClass$R([
4103
4145
  property()
4104
- ], FlowButton.prototype, "type", 2);
4146
+ ], FlowButton$1.prototype, "type", 2);
4105
4147
  __decorateClass$R([
4106
4148
  property()
4107
- ], FlowButton.prototype, "name", 2);
4149
+ ], FlowButton$1.prototype, "name", 2);
4108
4150
  __decorateClass$R([
4109
4151
  property()
4110
- ], FlowButton.prototype, "value", 2);
4152
+ ], FlowButton$1.prototype, "value", 2);
4111
4153
  __decorateClass$R([
4112
4154
  property()
4113
- ], FlowButton.prototype, "href", 2);
4155
+ ], FlowButton$1.prototype, "href", 2);
4114
4156
  __decorateClass$R([
4115
4157
  property()
4116
- ], FlowButton.prototype, "target", 2);
4158
+ ], FlowButton$1.prototype, "target", 2);
4117
4159
  __decorateClass$R([
4118
4160
  property()
4119
- ], FlowButton.prototype, "rel", 2);
4161
+ ], FlowButton$1.prototype, "rel", 2);
4120
4162
  __decorateClass$R([
4121
4163
  property()
4122
- ], FlowButton.prototype, "download", 2);
4164
+ ], FlowButton$1.prototype, "download", 2);
4123
4165
  __decorateClass$R([
4124
4166
  property()
4125
- ], FlowButton.prototype, "form", 2);
4167
+ ], FlowButton$1.prototype, "form", 2);
4126
4168
  __decorateClass$R([
4127
4169
  property({ attribute: "formaction" })
4128
- ], FlowButton.prototype, "formAction", 2);
4170
+ ], FlowButton$1.prototype, "formAction", 2);
4129
4171
  __decorateClass$R([
4130
4172
  property({ attribute: "formenctype" })
4131
- ], FlowButton.prototype, "formEnctype", 2);
4173
+ ], FlowButton$1.prototype, "formEnctype", 2);
4132
4174
  __decorateClass$R([
4133
4175
  property({ attribute: "formmethod" })
4134
- ], FlowButton.prototype, "formMethod", 2);
4176
+ ], FlowButton$1.prototype, "formMethod", 2);
4135
4177
  __decorateClass$R([
4136
4178
  property({ attribute: "formnovalidate", type: Boolean })
4137
- ], FlowButton.prototype, "formNoValidate", 2);
4179
+ ], FlowButton$1.prototype, "formNoValidate", 2);
4138
4180
  __decorateClass$R([
4139
4181
  property({ attribute: "formtarget" })
4140
- ], FlowButton.prototype, "formTarget", 2);
4182
+ ], FlowButton$1.prototype, "formTarget", 2);
4141
4183
  __decorateClass$R([
4142
4184
  watch("disabled", { waitUntilFirstUpdate: true })
4143
- ], FlowButton.prototype, "handleDisabledChange", 1);
4144
- FlowButton = __decorateClass$R([
4185
+ ], FlowButton$1.prototype, "handleDisabledChange", 1);
4186
+ FlowButton$1 = __decorateClass$R([
4145
4187
  customElement("flow-ui-button")
4146
- ], FlowButton);
4188
+ ], FlowButton$1);
4189
+
4190
+ const FlowButton = FlowButton$1;
4191
+ FlowButton$1.define("flow-ui-button");
4147
4192
 
4148
4193
  const isUndefined = (val) => typeof val === "undefined";
4149
4194
  const isNull = (val) => val === null;
@@ -23358,7 +23403,7 @@ const translation = {
23358
23403
  };
23359
23404
  registerTranslation(translation);
23360
23405
 
23361
- const version = "0.0.33";
23406
+ const version = "0.0.34";
23362
23407
 
23363
23408
  const CONSOLE_HIGHLIGHT_STYLE = `
23364
23409
  padding: 2px 4px;
@@ -544,6 +544,11 @@
544
544
 
545
545
  --flow-ui-chart-stroke-color-9: var(--flow-ui-color-yellow-500);
546
546
  --flow-ui-chart-fill-color-9: var(--flow-ui-color-yellow-300);
547
+
548
+ --flow-ui-map-background-color: var(--flow-ui-color-neutral-0);
549
+ --flow-ui-map-busy-track-size: var(--flow-ui-spacing-2x-small);
550
+ --flow-ui-map-busy-track-color: transparent;
551
+ --flow-ui-map-busy-indicator-color: var(--flow-ui-color-primary-500);
547
552
  }
548
553
 
549
554
  .flow-ui-scroll-lock {
@@ -553,6 +553,11 @@ export default css`
553
553
 
554
554
  --flow-ui-chart-stroke-color-9: var(--flow-ui-color-yellow-500);
555
555
  --flow-ui-chart-fill-color-9: var(--flow-ui-color-yellow-300);
556
+
557
+ --flow-ui-map-background-color: var(--flow-ui-color-neutral-0);
558
+ --flow-ui-map-busy-track-size: var(--flow-ui-spacing-2x-small);
559
+ --flow-ui-map-busy-track-color: transparent;
560
+ --flow-ui-map-busy-indicator-color: var(--flow-ui-color-primary-500);
556
561
  }
557
562
 
558
563
  .flow-ui-scroll-lock {
@@ -545,6 +545,11 @@
545
545
 
546
546
  --flow-ui-chart-stroke-color-9: var(--flow-ui-color-yellow-500);
547
547
  --flow-ui-chart-fill-color-9: var(--flow-ui-color-yellow-300);
548
+
549
+ --flow-ui-map-background-color: var(--flow-ui-color-neutral-0);
550
+ --flow-ui-map-busy-track-size: var(--flow-ui-spacing-2x-small);
551
+ --flow-ui-map-busy-track-color: transparent;
552
+ --flow-ui-map-busy-indicator-color: var(--flow-ui-color-primary-500);
548
553
  }
549
554
 
550
555
  .flow-ui-scroll-lock {
@@ -554,6 +554,11 @@ export default css`
554
554
 
555
555
  --flow-ui-chart-stroke-color-9: var(--flow-ui-color-yellow-500);
556
556
  --flow-ui-chart-fill-color-9: var(--flow-ui-color-yellow-300);
557
+
558
+ --flow-ui-map-background-color: var(--flow-ui-color-neutral-0);
559
+ --flow-ui-map-busy-track-size: var(--flow-ui-spacing-2x-small);
560
+ --flow-ui-map-busy-track-color: transparent;
561
+ --flow-ui-map-busy-indicator-color: var(--flow-ui-color-primary-500);
557
562
  }
558
563
 
559
564
  .flow-ui-scroll-lock {