@pine-ds/core 2.16.1 → 2.16.3

package/dist/pine-core/p-cd14918d.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["labelCss","PdsTextareaStyle0","pdsInputTokensCss","PdsTextareaStyle1","pdsTextareaCss","PdsTextareaStyle2","PdsTextarea","exports","this","inheritedAttributes","onBlur","ev","_this","hasFocus","focusedValue","value","emitValueChange","pdsBlur","emit","onFocus","pdsFocus","onInput","input","target","emitInputChange","onTextareaChange","componentId","class_1","prototype","setFocus","nativeTextarea","focus","debounceChanged","_a","pdsInput","debounce","originalPdsInput","undefined","debounceEvent","valueChanged","getValue","event","textarea","isRequired","newValue","toString","pdsTextareaChange","textareaClassNames","classNames","invalid","push","join","connectedCallback","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","render","h","Host","key","disabled","readonly","class","label","htmlFor","ref","assignDescription","helperMessage","autocomplete","id","name","placeholder","readOnly","required","rows","onChange","messageId","icon","danger","size","errorMessage"],"sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font-weight: var(--pine-font-weight-medium);\n\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n  --pine-input-color-background-danger: var(--pine-color-red-050);\n}\n",":host {\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  display: inline;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-weight: var(--pine-font-weight-medium);\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n})\nexport class PdsTextarea {\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-texarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\n          <textarea\n            ref={(el) => this.nativeTextarea = el }\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onBlur={this.onBlur}\n            onChange={this.onTextareaChange}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            {...this.inheritedAttributes}\n          >\n            {value}\n          </textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pine-core/p-d477224e.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-5480346a.system.js"],(function(e){"use strict";var n,i,a,o;return{setters:[function(e){n=e.r;i=e.h;a=e.H},function(e){o=e.d}],execute:function(){var r=":host{display:block}details{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--color-text-hover:var(--pine-color-text-secondary);--number-animation-transform-timing:200ms;border-radius:var(--pine-dimension-xs)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--pine-color-background-container)}details[open] summary{color:var(--pine-color-text-active);font-weight:var(--pine-font-weight-semi-bold)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);font-family:var(--pine-font-family-body);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding-block:calc(var(--pine-dimension-2xs) * 1.5);-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs);-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--pine-color-background-container-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:calc(var(--pine-dimension-sm) + 2);padding-block-end:calc(var(--pine-dimension-sm) + 2);padding-inline:calc(var(--pine-dimension-2xs) * 1.5)}";var t=r;var s=e("pds_accordion",function(){function e(e){var i=this;n(this,e);this.handleToggle=function(){i.isOpen=i.detailsEl.open};this.getOpenAttribute=function(){if(i.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}e.prototype.handleOpenState=function(e){this.isOpen=e};e.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};e.prototype.render=function(){var e=this;return i(a,{key:"92a6e19b0376d9cc14a86c9dda2fbfeef11297e3",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"0bb94526cebdcefcec62976c1623ef208aaa3119"},this.getOpenAttribute(),{ref:function(n){return e.detailsEl=n}}),i("summary",{key:"b599fe5da538efde146be5ff8db8a04faf5c6c1b",part:"accordion-button"},i("slot",{key:"8bdfa4448b41da6fd46232fe854f7c475fc633bf",name:"label"},"Details"),i("pds-icon",{key:"ca51ab8291047c08cef21ef55c85a8a47f8cb3e0",icon:o})),i("div",{key:"628dc7ce9263bbd983fc2353181e31b6fca0176a",part:"accordion-body",class:"pds-accordion__body"},i("slot",{key:"314d59312a3fbb2cc8a1c4d8a7f55634d16b079d"}))))};Object.defineProperty(e,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return e}());s.style=t}}}));
-//# sourceMappingURL=p-d477224e.system.entry.js.map

package/dist/pine-core/p-d477224e.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","part","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n\n  // TODO: Needs discussion\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --color-text-hover: var(--pine-color-text-secondary);\n  --number-animation-transform-timing: 200ms;\n\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(--pine-dimension-2xs);\n  padding-inline-start: var(--pine-dimension-xs);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,ytDACxB,IAAAC,EAAeD,E,ICaFE,EAAYC,EAAA,2B,mCAwBfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCAfY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,C,EAchBH,EAAAC,UAAAG,iBAAA,WACEX,KAAKI,UAAUQ,iBAAiB,SAAUZ,KAAKC,a,EAGjDM,EAAAC,UAAAK,OAAA,eAAAX,EAAAF,KACE,OACEc,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIlB,KAAKmB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAahB,KAAKM,mBAAkB,CAAEgB,IAAK,SAACC,GAAE,OAAMrB,EAAKE,UAAYmB,CAAvB,IAC5CT,EAAA,WAAAE,IAAA,2CAASQ,KAAK,oBACZV,EAAA,QAAAE,IAAA,2CAAMS,KAAK,SAAO,WAClBX,EAAA,YAAAE,IAAA,2CAAUU,KAAMC,KAElBb,EAAA,OAAAE,IAAA,2CAAKQ,KAAK,iBAAiBP,MAAM,uBAC/BH,EAAA,QAAAE,IAAA,+C,uIAhDa,I","ignoreList":[]}