@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/src/Tab/sgds-tab.scss

@@ -1,84 +0,0 @@
-@import '../utils/components.style';
-@import '../utils/base.scss';
-
-:host {
-  display: inline-block;
-
-  sgds-tab {
-    + sgds-tab{
-      margin-right: 1rem;
-    }
-  }
-}
-
-.tab {
-  display: inline-flex;
-  align-items: center;
-  font-family: $font-family-sans-serif;
-  font-size: $font-size-base;
-  color: $gray-600;
-  padding: $nav-sgds-tabs-padding-y 0;
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-  transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
-}
-
-.tab:focus {
-  outline: none;
-}
-
-.tab:focus-visible:not(.tab--disabled) {
-  color: $blue-500;
-}
-
-.tab:focus-visible {
-  outline: $blue-500 solid $input-btn-focus-width;
-  outline-offset: calc(-1 * #{$input-btn-focus-width} - 1px);
-}
-
-.tab.tab--active:not(.tab--disabled) {
-  color: $body-color;
-  font-weight: $font-weight-bold;
-  border-bottom: solid $nav-tabs-border-width $blue-500;
-}
-
-
-
-.tab.tab--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-
-@media (forced-colors: active) {
-  .tab.tab--active:not(.tab--disabled) {
-    outline: solid 1px transparent;
-    outline-offset: -3px;
-  }
-}
-
-.tab {
-  ::slotted(i){
-    margin-top:-4px;
-    margin-right: 0.5rem;
-  }
-  ::slotted(.badge){
-    margin-left: 0.5rem;
-  }
-  &--basic-toggle{
-    background-color: $white;
-    border: 1px solid $gray-400;
-    border-radius: 0;
-    color: #1d2939;
-    padding: 0.75rem 1.5rem;
-    + .tab--basic-toggle{
-      margin-left: -2px;
-    }
-    &.tab--active:not(.tab--disabled){
-      background: var(--indicator-color);
-      color: white;
-      border-bottom: 1px solid $gray-400;
-    }
-  }
-}

package/src/Tab/sgds-tab.ts

@@ -1,87 +0,0 @@
-import { html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import SgdsElement from "../utils/sgds-element";
-import { watch } from "../utils/watch";
-import styles from "./sgds-tab.scss";
-
-let id = 0;
-
-@customElement("sgds-tab")
-export class SgdsTab extends SgdsElement {
-  static styles = styles;
-  @query(".tab") tab: HTMLElement;
-
-  private readonly attrId = ++id;
-  private readonly componentId = `sgds-tab-${this.attrId}`;
-
-  @property({ reflect: true }) label = "";
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  @property({ reflect: true }) panel = "";
-
-
-
-
-  /** Draws the tab in an active state. */
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  /** Makes the tab closable and shows a close button. */
-  @property({ type: Boolean }) closable = false;
-
-  /** Disables the tab and prevents selection. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ type: Boolean, reflect: true }) variant;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "tab");
-  }
-
-  /** Sets focus to the tab. */
-  focus(options?: FocusOptions) {
-    this.tab.focus(options);
-  }
-
-  /** Removes focus from the tab. */
-  blur() {
-    this.tab.blur();
-  }
-
-  handleCloseClick() {
-    this.emit("sgds-close");
-  }
-
-  @watch("active")
-  handleActiveChange() {
-    this.setAttribute("aria-selected", this.active ? "true" : "false");
-  }
-
-  @watch("disabled")
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-
-  render() {
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    this.id = this.id.length > 0 ? this.id : this.componentId;
-
-    const getAttr = this.closest('sgds-tab').getAttribute('variant')
-
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          tab: true,
-          "tab--active": this.active,
-          "tab--closable": this.closable,
-          "tab--disabled": this.disabled,
-          [`tab--${getAttr}`]: getAttr
-        })}
-        tabindex=${this.disabled ? "-1" : "0"}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}

package/src/Tab/sgds-tabgroup.scss

@@ -1,198 +0,0 @@
-@import '../utils/components.style';
-@import '../utils/base.scss';
-:host {
-    --indicator-color: #0f71bb;
-    --track-color: transparent;
-    --track-width: 2px;
-    display: block;
-
-  }
-  .tab-group {
-    display: flex;
-    border-radius: 0;
-  }
-  .tab-group__tabs {
-    display: flex;
-    position: relative;
-  }
-  .tab-group__indicator {
-    position: absolute;
-    // transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) width ease;
-  }
-  .tab-group--has-scroll-controls .tab-group__nav-container {
-    position: relative;
-    padding: 0 var(--sl-spacing-x-large);
-  }
-  .tab-group__body {
-    display: block;
-    overflow: auto;
-  }
-  .tab-group__scroll-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: var(--sl-spacing-x-large);
-  }
-  .tab-group__scroll-button--start {
-    left: 0;
-  }
-  .tab-group__scroll-button--end {
-    right: 0;
-  }
-  .tab-group--rtl .tab-group__scroll-button--start {
-    left: auto;
-    right: 0;
-  }
-  .tab-group--rtl .tab-group__scroll-button--end {
-    left: 0;
-    right: auto;
-  }
-  /*
-   * Top
-   */
-  .tab-group--top {
-    flex-direction: column;
-   
-  }
-  .tab-group--top .tab-group__nav-container {
-    order: 1;
-  }
-  .tab-group--top .tab-group__nav {
-    display: flex;
-    overflow-x: auto;
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-  /* Hide scrollbar in Chrome/Safari */
-  .tab-group--top .tab-group__nav::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-  .tab-group--top .tab-group__tabs {
-    flex: 1 1 auto;
-    position: relative;
-    flex-direction: row;
-    border-bottom: solid $nav-tabs-border-width transparent;
-    gap: 1rem;
-    
-  }
-  .tab-group--top .tab-group__indicator {
-    bottom: calc(-1 * #{$nav-tabs-border-width});
-    // border-bottom: solid $nav-tabs-border-width $blue-500;
-  }
-  .tab-group--top .tab-group__body {
-    order: 2;
-  }
-  .tab-group--top ::slotted(sl-tab-panel) {
-    --padding: var(--sl-spacing-medium) 0;
-  }
-  /*
-   * Bottom
-   */
-  .tab-group--bottom {
-    flex-direction: column;
-  }
-  .tab-group--bottom .tab-group__nav-container {
-    order: 2;
-  }
-  .tab-group--bottom .tab-group__nav {
-    display: flex;
-    overflow-x: auto;
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-  /* Hide scrollbar in Chrome/Safari */
-  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-  .tab-group--bottom .tab-group__tabs {
-    flex: 1 1 auto;
-    position: relative;
-    flex-direction: row;
-    border-top: solid $nav-tabs-border-width transparent;
-  }
-  .tab-group--bottom .tab-group__indicator {
-    top: calc(-1 * #{$nav-tabs-border-width});
-    border-top: solid $nav-tabs-border-width $blue-500;
-  }
-  .tab-group--bottom .tab-group__body {
-    order: 1;
-  }
-  .tab-group--bottom ::slotted(sl-tab-panel) {
-    --padding: var(--sl-spacing-medium) 0;
-  }
-  /*
-   * Start
-   */
-  .tab-group--start {
-    flex-direction: row;
-  }
-  .tab-group--start .tab-group__nav-container {
-    order: 1;
-  }
-  .tab-group--start .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-    border-inline-end: solid $nav-tabs-border-width transparent;
-  }
-  .tab-group--start .tab-group__indicator {
-    right: calc(-1 * #{$nav-tabs-border-width});
-    border-right: solid $nav-tabs-border-width $blue-500;
-  }
-  .tab-group--start.tab-group--rtl .tab-group__indicator {
-    right: auto;
-    left: calc(-1 * #{$nav-tabs-border-width});
-  }
-  .tab-group--start .tab-group__body {
-    flex: 1 1 auto;
-    order: 2;
-  }
-  .tab-group--start ::slotted(sl-tab-panel) {
-    --padding: 0 var(--sl-spacing-medium);
-  }
-  /*
-   * End
-   */
-  .tab-group--end {
-    flex-direction: row;
-  }
-  .tab-group--end .tab-group__nav-container {
-    order: 2;
-  }
-  .tab-group--end .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-    border-left: solid $nav-tabs-border-width transparent;
-  }
-  .tab-group--end .tab-group__indicator {
-    left: calc(-1 * #{$nav-tabs-border-width});
-    border-inline-start: solid $nav-tabs-border-width $blue-500;
-  }
-  .tab-group--end.tab-group--rtl .tab-group__indicator {
-    right: calc(-1 * #{$nav-tabs-border-width});
-    left: auto;
-  }
-  .tab-group--end .tab-group__body {
-    flex: 1 1 auto;
-    order: 1;
-  }
-  .tab-group--end ::slotted(sl-tab-panel) {
-    --padding: 0 var(--sl-spacing-medium);
-  }
-
-  .tab-group--top{
-    &.tab-group--basic-toggle .tab-group__tabs {
-      gap:0;
-      ::slotted(sgds-tab){
-        margin-right: -2px;
-
-      }
-    }
-  }
-
-  
-  

package/src/Tab/sgds-tabgroup.ts

@@ -1,295 +0,0 @@
-import { html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { scrollIntoView } from '../utils/scroll';
-import SgdsElement from "../utils/sgds-element";
-import { watch } from "../utils/watch";
-import styles from "./sgds-tabgroup.scss";
-import { SgdsTabPanel } from './sgds-tabpanel';
-import { SgdsTab } from './sgds-tab';
-
-@customElement('sgds-tab-group')
-export class SgdsTabGroup extends SgdsElement {
-  static styles = styles;
-
-  @query('.tab-group') tabGroup: HTMLElement;
-  @query('.tab-group__body') body: HTMLSlotElement;
-  @query('.tab-group__nav') nav: HTMLElement;
-
-  private activeTab?: SgdsTab;
-  private mutationObserver: MutationObserver;
-  private resizeObserver: ResizeObserver;
-  private tabs: SgdsTab[] = [];
-  private panels: SgdsTabPanel[] = [];
-
-  @state() private hasScrollControls = false;
-
-  /** The placement of the tabs. */
-  @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
-
-  @property({reflect: true}) TabVariant: 'basic-toggle' | 'info-toggle';
-  /**
-   * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
-   * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
-   */
-  @property() activation: 'auto' | 'manual' = 'auto';
-
-  /** Disables the scroll arrows that appear when tabs overflow. */
-  @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.resizeObserver = new ResizeObserver(() => {
-      this.updateScrollControls();
-    });
-
-    this.mutationObserver = new MutationObserver(mutations => {
-      // Update aria labels when the DOM changes
-      if (mutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {
-        setTimeout(() => this.setAriaLabels());
-      }
-
-      // Sync tabs when disabled states change
-      if (mutations.some(m => m.attributeName === 'disabled')) {
-        this.syncTabsAndPanels();
-      }
-    });
-
-    this.updateComplete.then(() => {
-      this.syncTabsAndPanels();
-      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
-      this.resizeObserver.observe(this.nav);
-
-      // Set initial tab state when the tabs first become visible
-      const intersectionObserver = new IntersectionObserver((entries, observer) => {
-        if (entries[0].intersectionRatio > 0) {
-          this.setAriaLabels();
-          this.setTabVariant();
-          this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
-          observer.unobserve(entries[0].target);
-        }
-      });
-      intersectionObserver.observe(this.tabGroup);
-    });
-  }
-
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.resizeObserver.unobserve(this.nav);
-  }
-
-  /** Shows the specified tab panel. */
-  show(panel: string) {
-    const tab = this.tabs.find(el => el.panel === panel);
-
-    if (tab) {
-      this.setActiveTab(tab, { scrollBehavior: 'smooth' });
-    }
-  }
-
-  getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {
-    const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="nav"]')!;
-
-    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {
-      return options.includeDisabled
-        ? el.tagName.toLowerCase() === 'sgds-tab'
-        : el.tagName.toLowerCase() === 'sgds-tab' && !el.disabled;
-    });
-  }
-
-  getAllPanels() {
-    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === 'sgds-tab-panel') as [SgdsTabPanel];
-  }
-
-  getActiveTab() {
-    return this.tabs.find(el => el.active);
-  }
-
-  handleClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    const tab = target.closest('sgds-tab') as SgdsTab;
-    const tabGroup = tab?.closest('sgds-tab-group');
-
-    // Ensure the target tab is in this tab group
-    if (tabGroup !== this) {
-      return;
-    }
-
-    if (tab !== null) {
-      this.setActiveTab(tab, { scrollBehavior: 'smooth' });
-    }
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    const target = event.target as HTMLElement;
-    const tab = target.closest('sgds-tab') as SgdsTab;
-    const tabGroup = tab?.closest('sgds-tab-group');
-
-    // Ensure the target tab is in this tab group
-    if (tabGroup !== this) {
-      return;
-    }
-
-    // Activate a tab
-    if (['Enter', ' '].includes(event.key)) {
-      if (tab !== null) {
-        this.setActiveTab(tab, { scrollBehavior: 'smooth' });
-        event.preventDefault();
-      }
-    }
-
-    // Move focus left or right
-    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      const activeEl = this.tabs.find(t => t.matches(':focus'));
-      
-
-      if (activeEl?.tagName.toLowerCase() === 'sgds-tab') {
-        let index = this.tabs.indexOf(activeEl);
-
-        if (event.key === 'Home') {
-          index = 0;
-        } else if (event.key === 'End') {
-          index = this.tabs.length - 1;
-        } else if (
-          ['top', 'bottom'].includes(this.placement) ||
-          (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')
-        ) {
-          index--;
-        } else if (
-          ['top', 'bottom'].includes(this.placement) ||
-          (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')
-        ) {
-          index++;
-        }
-
-        if (index < 0) {
-          index = this.tabs.length - 1;
-        }
-
-        if (index > this.tabs.length - 1) {
-          index = 0;
-        }
-
-        this.tabs[index].focus({ preventScroll: true });
-
-        if (this.activation === 'auto') {
-          this.setActiveTab(this.tabs[index], { scrollBehavior: 'smooth' });
-        }
-
-        if (['top', 'bottom'].includes(this.placement)) {
-          scrollIntoView(this.tabs[index], this.nav, 'horizontal');
-        }
-
-        event.preventDefault();
-      }
-    }
-  }
-
-  handleScrollToStart() {
-    this.nav.scroll({
-      left: this.nav.scrollLeft - this.nav.clientWidth,
-      behavior: 'smooth'
-    });
-  }
-
-  handleScrollToEnd() {
-    this.nav.scroll({
-      left: this.nav.scrollLeft + this.nav.clientWidth,
-      behavior: 'smooth'
-    });
-  }
-
-  @watch('noScrollControls', { waitUntilFirstUpdate: true })
-  updateScrollControls() {
-    if (this.noScrollControls) {
-      this.hasScrollControls = false;
-    } else {
-      this.hasScrollControls =
-        ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
-    }
-  }
-
-  setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {
-    options = {
-      emitEvents: true,
-      scrollBehavior: 'auto',
-      ...options
-    };
-
-    if (tab !== this.activeTab && !tab.disabled) {
-      const previousTab = this.activeTab;
-      this.activeTab = tab;
-
-      // Sync active tab and panel
-      this.tabs.map(el => (el.active = el === this.activeTab));
-      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));
-
-
-      if (['top', 'bottom'].includes(this.placement)) {
-        scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);
-      }
-
-      // Emit events
-      if (options.emitEvents) {
-        if (previousTab) {
-          this.emit('sgds-tab-hide', { detail: { name: previousTab.panel } });
-        }
-
-        this.emit('sgds-tab-show', { detail: { name: this.activeTab.panel } });
-      }
-    }
-  }
-
-  setAriaLabels() {
-    // Link each tab with its corresponding panel
-    this.tabs.forEach(tab => {
-      const panel = this.panels.find(el => el.name === tab.panel);
-      if (panel) {
-        tab.setAttribute('aria-controls', panel.getAttribute('id')!);
-        panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);
-      }
-    });
-  }
-
-  setTabVariant() {
-    // Link each tab with its corresponding panel
-    this.tabs.forEach(tab => {
-      tab.setAttribute('variant', this.TabVariant);
-    });
-  }
-
-  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
-  syncTabsAndPanels() {
-    this.tabs = this.getAllTabs({ includeDisabled: false });
-    this.panels = this.getAllPanels();
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'tab-group': true,
-          'tab-group--top': this.placement === 'top',
-          'tab-group--bottom': this.placement === 'bottom',
-          'tab-group--start': this.placement === 'start',
-          'tab-group--end': this.placement === 'end',
-          'tab-group--basic-toggle': this.TabVariant === 'basic-toggle',
-          'tab-group--info-toggle': this.TabVariant === 'info-toggle',
-        })}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="tab-group__nav-container" part="nav">
-          <div class="tab-group__nav">
-            <div part="tabs" class="tab-group__tabs" role="tablist">
-              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
-            </div>
-          </div>
-        </div>
-        <slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
-      </div>
-    `;
-  }
-}

package/src/Tab/sgds-tabpanel.scss

@@ -1,12 +0,0 @@
-@import '../utils/components.style';
-:host {
-    --padding: 1rem;
-    display: block;
-  }
-  .tab-panel {
-    display: block;
-    padding: var(--padding) 0;
-  }
-  .tab-panel:not(.tab-panel--active) {
-    display: none;
-  }