@pine-ds/core 1.1.0 → 1.2.0

package/dist/cjs/pds-checkbox_2.cjs.entry.js

@@ -1,112 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7d9c71f6.js');
-const pdsLabel = require('./pds-label-5ebae56e.js');
-
-const pdsCheckboxCss = ":host{--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-color-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-500);--border-radius:var(--pine-border-radius-050);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-invalid:0 0 0 2px var(--pine-color-red-200);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-background-hover:var(--pine-color-grey-100);--color-border-disabled:var(--pine-color-charcoal-100);--color-border-icon:var(--pine-color-white);--color-checked:var(--pine-color-charcoal-500);--color-disabled:var(--pine-color-grey-300);--color-invalid:var(--pine-color-red-300);--color-text-disabled:var(--pine-color-grey-500);--color-text-message:var(--pine-color-charcoal-200);--sizing-input:var(--pine-font-size-100);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background);border:var(--border-default);border-radius:var(--border-radius);height:var(--sizing-input);margin:0;position:relative;width:var(--sizing-input)}input:hover{background:var(--color-background-hover);border:var(--border-color-interactive-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--color-border-icon);border-left:0;border-top:0;content:\"\";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--color-background-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--color-border-disabled)}input:disabled+label{color:var(--color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--color-text-message);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
-const PdsCheckboxStyle0 = pdsCheckboxCss;
-
-const PdsCheckbox = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pdsCheckboxChange = index.createEvent(this, "pdsCheckboxChange", 7);
-        this.handleCheckboxChange = (e) => {
-            if (this.disabled) {
-                return;
-            }
-            const target = e.target;
-            this.checked = target.checked;
-            this.pdsCheckboxChange.emit({
-                checked: target.checked,
-                value: this.value
-            });
-        };
-        this.checked = undefined;
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.indeterminate = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.labelHidden = undefined;
-        this.name = undefined;
-        this.required = undefined;
-        this.value = undefined;
-    }
-    classNames() {
-        const classNames = [];
-        if (this.invalid) {
-            classNames.push('is-invalid');
-        }
-        if (this.indeterminate) {
-            classNames.push('is-indeterminate');
-        }
-        if (this.disabled) {
-            classNames.push('is-disabled');
-        }
-        return classNames.join('  ');
-    }
-    render() {
-        return (index.h(index.Host, { key: '6353e355fefe987180b1cb5b00af00e92c8f0c44', class: this.classNames() }, index.h("input", { key: '16f720ba2c5cad01f8d29456e3ecbc8e4cbb1ce8', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), index.h(pdsLabel.PdsLabel, { key: '8de98b79b9390c392a2bf41173ac97e4e2f4d5e2', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            index.h("div", { key: '02f61d5598e4da36f3c87cbb23863d0a485e3542', class: 'pds-checkbox__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '4628f5df5aeeda30f53c327abf62d1125d3eb441', class: `pds-checkbox__message pds-checkbox__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
-    }
-};
-PdsCheckbox.style = PdsCheckboxStyle0;
-
-const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-087);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
-const PdsTableCellStyle0 = pdsTableCellCss;
-
-const PdsTableCell = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.handleScroll = () => {
-            if (this.tableRef.scrollLeft > 0) {
-                this.tableScrolling = true;
-            }
-            else {
-                this.tableScrolling = false;
-            }
-        };
-        this.truncate = undefined;
-        this.tableScrolling = false;
-    }
-    componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
-    }
-    componentDidLoad() {
-        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
-        }
-    }
-    classNames() {
-        const classNames = [];
-        if (this.tableRef && this.tableRef.compact) {
-            classNames.push('is-compact');
-        }
-        if (this.truncate) {
-            classNames.push('is-truncated');
-        }
-        if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {
-            classNames.push('has-scrolled');
-        }
-        return classNames.join(' ');
-    }
-    render() {
-        return (index.h(index.Host, { key: '7c7f228b3911eec633c6ffd817f22fbc6666be8a', class: this.classNames(), role: "gridcell", style: this.tableRef &&
-                this.tableRef.fixedColumn &&
-                this.tableRef.selectable
-                ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '37c43f300478beffc41d2450bbb5a6e13099f58e' })));
-    }
-    get hostElement() { return index.getElement(this); }
-};
-PdsTableCell.style = PdsTableCellStyle0;
-
-exports.pds_checkbox = PdsCheckbox;
-exports.pds_table_cell = PdsTableCell;
-
-//# sourceMappingURL=pds-checkbox_2.cjs.entry.js.map

package/dist/cjs/pds-checkbox_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"pds-checkbox.pds-table-cell.entry.cjs.js","mappings":"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","names":["h","Host","assignDescription","PdsLabel","messageId"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);\n\n  --border-radius: var(--pine-border-radius-050);\n\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --box-shadow-focus-invalid: 0 0 0 2px var(--pine-color-red-200);\n\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-border-disabled: var(--pine-color-charcoal-100);\n  --color-border-icon: var(--pine-color-white);\n  --color-checked: var(--pine-color-charcoal-500);\n  --color-disabled: var(--pine-color-grey-300);\n  --color-invalid: var(--pine-color-red-300);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-message: var(--pine-color-charcoal-200);\n\n  --sizing-input: var(--pine-font-size-100);\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\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-invalid); // Remove when outline radius is supported in Safari\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--color-invalid);\n  }\n}\n\n:host(.is-indeterminate) {\n  input:checked {\n    &::after {\n      border-bottom: 0;\n      transform: rotate(87deg) translate3d(-114%, 25%, 0);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--color-background);\n  border: var(--border-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border: var(--border-color-interactive-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      border: 1px solid var(--color-border-icon);\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\n    }\n  }\n\n  &:disabled {\n    background: var(--color-background-disabled);\n    border-color: var(--color-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-disabled);\n\n      &::after {\n        border-color: var(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--color-text-disabled);\n    }\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\nlabel {\n  margin-inline-start: 10px;\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.pds-checkbox__message {\n  color: var(--color-text-message);\n  font-size: 14px;\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: 'pds-checkbox.scss',\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked: boolean;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop() indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"checkbox\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n",":host {\n  --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n  --color-background-fixed: var(--pine-color-white);\n  --color-cell-default: var(--pine-color-charcoal-200);\n\n  --dimension-fixed-cell-position: 0;\n  --dimension-max-width-truncated: 100px;\n\n  --font-size-cell-default: var(--pine-font-size-087);\n\n  --number-fixed-column-index: 0;\n\n  --spacing-line-height-cell-default: var(--pine-line-height-125);\n  --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n  --spacing-padding-compact: var(--pine-spacing-050);\n\n  color: var(--color-cell-default);\n  display: table-cell;\n  font-size: var(--font-size-cell-default);\n  line-height: var(--spacing-line-height-cell-default);\n  padding: var(--spacing-padding-cell-default);\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n  background: var(--color-background-fixed);\n  left: var(--dimension-fixed-cell-position);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n  max-width: var(--dimension-max-width-truncated);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n  vertical-align: middle;\n  width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrl: 'pds-table-cell.scss',\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}