@govtechsg/sgds-web-component 0.0.10 → 0.0.11

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;
-  }

package/src/Tab/sgds-tabpanel.ts

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

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

package/src/Textarea/sgds-textarea.scss

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