@loadsmart/miranda-wc 1.30.0 → 1.31.0

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.
@@ -3,32 +3,42 @@ import { type ColorToken } from '@loadsmart/miranda-tokens';
3
3
  import type { TypographyVariant } from '../../styles/typography';
4
4
  import type { HTMLTag } from '../../mixins/polymorphic-tag';
5
5
  export interface TextProps {
6
- variant?: TypographyVariant;
7
- color?: ColorToken;
8
6
  as?: HTMLTag;
7
+ color?: ColorToken;
8
+ ellipsized?: boolean;
9
+ variant?: TypographyVariant;
9
10
  }
10
11
  declare const Text_base: import("../../mixins/polymorphic-tag/polymorphic-tag.types").Constructor<import("../../mixins/polymorphic-tag/polymorphic-tag.types").PolymorphicTagInterface> & typeof LitElement;
11
12
  export declare class Text extends Text_base {
12
13
  static styles: import("lit").CSSResult[];
13
14
  static get properties(): {
14
- variant: {
15
+ color: {
15
16
  type: StringConstructor;
17
+ };
18
+ ellipsized: {
19
+ type: BooleanConstructor;
16
20
  reflect: boolean;
17
21
  };
18
- color: {
22
+ variant: {
19
23
  type: StringConstructor;
24
+ reflect: boolean;
20
25
  };
21
26
  };
22
- /**
23
- * Typography variant.
24
- * @type {TypographyVariant}
25
- */
26
- variant: TypographyVariant;
27
27
  /**
28
28
  * Text color.
29
29
  * @type {ColorToken}
30
30
  */
31
31
  color: ColorToken;
32
+ /**
33
+ * Option to enable text ellipsis.
34
+ * @type {Boolean}
35
+ */
36
+ ellipsized: boolean;
37
+ /**
38
+ * Typography variant.
39
+ * @type {TypographyVariant}
40
+ */
41
+ variant: TypographyVariant;
32
42
  constructor();
33
43
  render(): import("lit-html").TemplateResult<2 | 1>;
34
44
  }
@@ -1 +1 @@
1
- {"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,EAAE,KAAK,UAAU,EAAc,MAAM,2BAA2B,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAI5D,MAAM,WAAW,SAAS;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;CACb;;AAED,qBAAa,IAAK,SAAQ,SAIzB;IACA,OAAgB,MAAM,4BAAc;IAEpC,WAAoB,UAAU;;;;;;;;MAK7B;IAED;;;OAGG;IACK,OAAO,EAAE,iBAAiB,CAAC;IAEnC;;;OAGG;IACK,KAAK,EAAE,UAAU,CAAC;;IAUjB,MAAM;CA8Cf;AAID,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,QAAQ,EAAE,IAAI,CAAC;KACf;CACD"}
1
+ {"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,EAAE,KAAK,UAAU,EAAc,MAAM,2BAA2B,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAI5D,MAAM,WAAW,SAAS;IACzB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B;;AAED,qBAAa,IAAK,SAAQ,SAIzB;IACA,OAAgB,MAAM,4BAAc;IAEpC,WAAoB,UAAU;;;;;;;;;;;;MAM7B;IAED;;;OAGG;IACK,KAAK,EAAE,UAAU,CAAC;IAE1B;;;OAGG;IACK,UAAU,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACK,OAAO,EAAE,iBAAiB,CAAC;;IAW1B,MAAM;CA+Cf;AAID,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,QAAQ,EAAE,IAAI,CAAC;KACf;CACD"}
@@ -1 +1 @@
1
- {"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAKA,iBAAS,MAAM,4BA4Id;AAED,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAKA,iBAAS,MAAM,4BAoJd;AAED,eAAe,MAAM,CAAC"}
package/dist/index.js CHANGED
@@ -522,9 +522,9 @@ const ct=t=>null!=t?t:x
522
522
  * Copyright 2018 Google LLC
523
523
  * SPDX-License-Identifier: BSD-3-Clause
524
524
  */
525
- const me=ht(class extends ut{constructor(t){var e;if(super(t),t.type!==dt||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,o)=>{const i=t[o];return null==i?e:e+`${o=o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`}),"")}update(t,[e]){const{style:o}=t.element;if(void 0===this.vt){this.vt=new Set;for(const t in e)this.vt.add(t);return this.render(e)}this.vt.forEach((t=>{null==e[t]&&(this.vt.delete(t),t.includes("-")?o.removeProperty(t):o[t]="")}));for(const t in e){const i=e[t];null!=i&&(this.vt.add(t),t.includes("-")?o.setProperty(t,i):o[t]=i)}return w}});class fe extends(bt(at,["h1","h2","h3","h4","h5","h6","p","span"],"span")){static get properties(){return{variant:{type:String,reflect:!0},color:{type:String}}}constructor(){super(),this.as="span",this.variant="body-md",this.color="color-text-primary"}render(){return D`
525
+ const me=ht(class extends ut{constructor(t){var e;if(super(t),t.type!==dt||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,o)=>{const i=t[o];return null==i?e:e+`${o=o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`}),"")}update(t,[e]){const{style:o}=t.element;if(void 0===this.vt){this.vt=new Set;for(const t in e)this.vt.add(t);return this.render(e)}this.vt.forEach((t=>{null==e[t]&&(this.vt.delete(t),t.includes("-")?o.removeProperty(t):o[t]="")}));for(const t in e){const i=e[t];null!=i&&(this.vt.add(t),t.includes("-")?o.setProperty(t,i):o[t]=i)}return w}});class fe extends(bt(at,["h1","h2","h3","h4","h5","h6","p","span"],"span")){static get properties(){return{color:{type:String},ellipsized:{type:Boolean,reflect:!0},variant:{type:String,reflect:!0}}}constructor(){super(),this.as="span",this.color="color-text-primary",this.ellipsized=!1,this.variant="body-md"}render(){return D`
526
526
  <${this.tag}
527
- class=${gt({"m-text":!0,"-body-lg-bold":"body-lg-bold"===this.variant,"-body-lg":"body-lg"===this.variant,"-body-md-bold-underline":"body-md-bold-underline"===this.variant,"-body-md-bold":"body-md-bold"===this.variant,"-body-md-underline":"body-md-underline"===this.variant,"-body-md":"body-md"===this.variant,"-body-sm-bold-underline":"body-sm-bold-underline"===this.variant,"-body-sm-bold":"body-sm-bold"===this.variant,"-body-sm-underline":"body-sm-underline"===this.variant,"-body-sm":"body-sm"===this.variant,"-button-lg":"button-lg"===this.variant,"-button-md":"button-md"===this.variant,"-button-sm":"button-sm"===this.variant,"-chips-md":"chips-md"===this.variant,"-chips-sm":"chips-sm"===this.variant,"-heading-lg-bold":"heading-lg-bold"===this.variant,"-heading-lg":"heading-lg"===this.variant,"-heading-md-bold":"heading-md-bold"===this.variant,"-heading-md":"heading-md"===this.variant,"-heading-sm-bold":"heading-sm-bold"===this.variant,"-heading-sm":"heading-sm"===this.variant,"-hero-lg-bold":"hero-lg-bold"===this.variant,"-hero-lg":"hero-lg"===this.variant,"-hero-md-bold":"hero-md-bold"===this.variant,"-hero-md":"hero-md"===this.variant,"-hero-sm-bold":"hero-sm-bold"===this.variant,"-hero-sm":"hero-sm"===this.variant,"-number-md":"number-md"===this.variant,"-number-sm":"number-sm"===this.variant,"-table-header-md":"table-header-md"===this.variant,"-table-header-sm":"table-header-sm"===this.variant})}
527
+ class=${gt({"m-text":!0,"-body-lg-bold":"body-lg-bold"===this.variant,"-body-lg":"body-lg"===this.variant,"-body-md-bold-underline":"body-md-bold-underline"===this.variant,"-body-md-bold":"body-md-bold"===this.variant,"-body-md-underline":"body-md-underline"===this.variant,"-body-md":"body-md"===this.variant,"-body-sm-bold-underline":"body-sm-bold-underline"===this.variant,"-body-sm-bold":"body-sm-bold"===this.variant,"-body-sm-underline":"body-sm-underline"===this.variant,"-body-sm":"body-sm"===this.variant,"-button-lg":"button-lg"===this.variant,"-button-md":"button-md"===this.variant,"-button-sm":"button-sm"===this.variant,"-chips-md":"chips-md"===this.variant,"-chips-sm":"chips-sm"===this.variant,"-heading-lg-bold":"heading-lg-bold"===this.variant,"-heading-lg":"heading-lg"===this.variant,"-heading-md-bold":"heading-md-bold"===this.variant,"-heading-md":"heading-md"===this.variant,"-heading-sm-bold":"heading-sm-bold"===this.variant,"-heading-sm":"heading-sm"===this.variant,"-hero-lg-bold":"hero-lg-bold"===this.variant,"-hero-lg":"hero-lg"===this.variant,"-hero-md-bold":"hero-md-bold"===this.variant,"-hero-md":"hero-md"===this.variant,"-hero-sm-bold":"hero-sm-bold"===this.variant,"-hero-sm":"hero-sm"===this.variant,"-number-md":"number-md"===this.variant,"-number-sm":"number-sm"===this.variant,"-table-header-md":"table-header-md"===this.variant,"-table-header-sm":"table-header-sm"===this.variant,"-ellipsized":Boolean(this.ellipsized)})}
528
528
  style=${me({"--m-text-color":yt(this.color)})}
529
529
  >
530
530
  <slot></slot>
@@ -532,6 +532,8 @@ const me=ht(class extends ut{constructor(t){var e;if(super(t),t.type!==dt||"styl
532
532
  `}}var $e,ye;fe.styles=[Z`
533
533
  :host {
534
534
  --m-text-color: ${Mt("color-text-primary")};
535
+ --m-text-display: inline-block;
536
+ --m-text-max-width: initial;
535
537
  }
536
538
 
537
539
  .m-text {
@@ -539,9 +541,8 @@ const me=ht(class extends ut{constructor(t){var e;if(super(t),t.type!==dt||"styl
539
541
 
540
542
  ${Pt()};
541
543
 
542
- display: inline-block;
543
-
544
544
  color: var(--m-text-color);
545
+ display: var(--m-text-display);
545
546
  }
546
547
 
547
548
  .-body-lg-bold {
@@ -667,6 +668,13 @@ const me=ht(class extends ut{constructor(t){var e;if(super(t),t.type!==dt||"styl
667
668
  .-table-header-sm {
668
669
  ${Pt("table-header-sm")};
669
670
  }
671
+
672
+ .-ellipsized {
673
+ overflow: hidden;
674
+ text-overflow: ellipsis;
675
+ white-space: nowrap;
676
+ max-width: var(--m-text-max-width);
677
+ }
670
678
  `],window.customElements.define("m-text",fe);class ve extends re{static get properties(){return{variant:{type:String},dismissible:{type:Boolean},dismissed:{type:Boolean,reflect:!0}}}constructor(){super(),$e.set(this,void 0),ye.set(this,(()=>{this.dismissed=!0,this.emit("m-dismiss",{composed:!0})})),this.variant="neutral",this.dismissible=!1,this.dismissed=!1}get primaryAction(){return null==t(this,$e,"f")&&e(this,$e,this.querySelector("m-banner-action-primary"),"f"),t(this,$e,"f")}updated(t){super.updated(t),t.has("variant")&&null!=this.primaryAction&&(this.primaryAction.variant=function(t){switch(t){case"warning":return"warning";case"danger":return"danger";default:return"primary"}}(this.variant))}render(){if(this.dismissed)return x;const e=null!=this.querySelector("*[slot='description']"),o=null!=this.querySelector("*[slot='actions']"),i=v`
671
679
  <m-close-button
672
680
  id="close"
@@ -1599,7 +1607,7 @@ let Be=class{constructor(t,e,o,i=!1){this.host=t,this.context=e,this.callback=o,
1599
1607
  ${H("animation: skeleton-loading 1s linear infinite alternate;")};
1600
1608
  width: var(--m-tag-skeleton-width);
1601
1609
  }
1602
- `]],window.customElements.define("m-tag",yi);class vi extends re{static get properties(){return{clearable:{type:Boolean},disabled:{type:Boolean,reflect:!0},max:{type:String},maxLength:{type:Number,reflect:!0,attribute:"max-length"},min:{type:String},minLength:{type:Number,reflect:!0,attribute:"min-length"},pattern:{type:String},placeholder:{type:String},readOnly:{type:Boolean,reflect:!0,attribute:"read-only"},size:{type:String},status:{type:String},step:{type:String},type:{type:String},value:{type:String}}}constructor(){super(),ui.add(this),this.inputElement=null,this.field=new Be(this,Wo,void 0,!0),this.clearable=!1,this.disabled=!1,this.placeholder=void 0,this.size="default",this.type="text",this.value=void 0,this.max=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","textbox")}render(){return v`
1610
+ `]],window.customElements.define("m-tag",yi);class vi extends re{static get properties(){return{clearable:{type:Boolean},disabled:{type:Boolean,reflect:!0},max:{type:String},maxLength:{type:Number,reflect:!0,attribute:"max-length"},min:{type:String},minLength:{type:Number,reflect:!0,attribute:"min-length"},pattern:{type:String},placeholder:{type:String},readOnly:{type:Boolean,reflect:!0,attribute:"read-only"},size:{type:String},status:{type:String},step:{type:String},type:{type:String},value:{type:String}}}constructor(){super(),ui.add(this),this.inputElement=null,this.field=new Be(this,Wo,void 0,!0),pi.set(this,(t=>{this.value=t.target.value,this.reemit(t)})),mi.set(this,(t=>{t.stopPropagation(),this.clear()})),this.clearable=!1,this.disabled=!1,this.placeholder=void 0,this.size="default",this.type="text",this.value=void 0,this.max=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","textbox")}render(){return v`
1603
1611
  <div
1604
1612
  class=${gt({container:!0,"-size-small":"small"===this.size,"-size-default":"default"===this.size,"-size-large":"large"===this.size,"is-disabled":Boolean(this.disabled),"-status-default":"default"===t(this,ui,"m",bi).call(this),"-status-danger":"danger"===t(this,ui,"m",bi).call(this)})}
1605
1613
  >
@@ -1620,17 +1628,17 @@ let Be=class{constructor(t,e,o,i=!1){this.host=t,this.context=e,this.callback=o,
1620
1628
  step=${this.step||x}
1621
1629
  value="${ct(this.value)}"
1622
1630
  @change=${this.reemit}
1623
- @input=${t(this,ui,"m",pi)}
1631
+ @input=${t(this,pi,"f")}
1624
1632
  />
1625
1633
  ${this.clearable?v`<m-close-button
1626
1634
  class=${gt({clear:!0,"is-visible":t(this,ui,"m",gi).call(this)})}
1627
1635
  controls="${ct(this.id)}"
1628
- @m-close=${t(this,ui,"m",mi)}
1636
+ @m-close=${t(this,mi,"f")}
1629
1637
  label="Clear input"
1630
1638
  ></m-close-button>`:x}
1631
1639
  <slot name="trailing"></slot>
1632
1640
  </div>
1633
- `}get input(){var t,e;return null==this.inputElement&&(this.inputElement=null!==(e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("input"))&&void 0!==e?e:null),this.inputElement}clear(){this.value="",this.input&&(this.input.value=""),this.emit("m-clear"),this.focus()}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}}ui=new WeakSet,gi=function(){const t=this.value||"";return!this.disabled&&t.length>0},bi=function(){var t;return this.status||(null===(t=this.field.value)||void 0===t?void 0:t.status)},pi=function(t){this.value=t.target.value,this.reemit(t)},mi=function(t){t.stopPropagation(),this.clear()},vi.styles=[Z`
1641
+ `}get input(){var t,e;return null==this.inputElement&&(this.inputElement=null!==(e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("input"))&&void 0!==e?e:null),this.inputElement}clear(){this.value="",this.input&&(this.input.value=""),this.emit("m-clear"),this.focus()}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}}pi=new WeakMap,mi=new WeakMap,ui=new WeakSet,gi=function(){const t=this.value||"";return!this.disabled&&t.length>0},bi=function(){var t;return this.status||(null===(t=this.field.value)||void 0===t?void 0:t.status)},vi.styles=[Z`
1634
1642
  :host {
1635
1643
  --m-text-field-background-color: transparent;
1636
1644
  --m-text-field-border-color: ${Mt("color-border")};