@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/src/Tab/sgds-tabgroup.scss

@@ -0,0 +1,198 @@
+@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

@@ -0,0 +1,295 @@
+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

@@ -0,0 +1,12 @@
+@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;
+  }

package/src/Tab/sgds-tabpanel.ts

@@ -0,0 +1,55 @@
+import { html } from 'lit';
+import { customElement, property } 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-tabpanel.scss";
+let id = 0;
+
+/**
+ * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ *
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+@customElement('sgds-tab-panel')
+export class SgdsTabPanel extends SgdsElement {
+  static styles = styles;
+  private readonly attrId = ++id;
+  private readonly componentId = `sgds-tab-panel-${this.attrId}`;
+
+  /** The tab panel's name. */
+  @property({ reflect: true }) name = '';
+
+  /** When true, the tab panel will be shown. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute('role', 'tabpanel');
+  }
+
+  @watch('active')
+  handleActiveChange() {
+    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');
+  }
+
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+          'tab-panel': true,
+          'tab-panel--active': this.active
+        })}
+      ></slot>
+    `;
+  }
+}

package/src/Textarea/index.ts

@@ -0,0 +1 @@
+export { SgdsTextArea } from "./sgds-textarea";

package/src/Textarea/sgds-textarea.scss

@@ -0,0 +1,23 @@
+
+@import '../utils/base.scss';
+@import "~@govtechsg/sgds/sass/forms/labels"; 
+@import "~@govtechsg/sgds/sass/forms/form-text";
+@import "~@govtechsg/sgds/sass/forms/form-control"; 
+@import "~@govtechsg/sgds/sass/forms/form-control-group"; 
+@import "~@govtechsg/sgds/sass/forms/input-group"; 
+@import "~@govtechsg/sgds/sass/forms/validation";
+
+:host{
+    --sgds-body-line-height: 2rem;
+    & > .text-area-label-wrapper{
+        line-height: var(--sgds-body-line-height);
+    }
+
+    .textarea-resize-none{
+        resize: none;
+    }
+    .textarea-resize-vertical {
+        resize: vertical;
+    }
+}
+