wip

Author: klagrida

apps/showcase/src/app/pages/docs/select/demos/select-disabled-demo-container.ts

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DemoContainer } from '../../../../components/demo-container/demo-container';
+import { ScSelectDisabledDemo } from './select-disabled-demo';
+
+@Component({
+  selector: 'app-select-disabled-demo-container',
+  imports: [DemoContainer, ScSelectDisabledDemo],
+  template: `
+    <app-demo-container title="Disabled Select" [code]="code">
+      <app-select-disabled-demo />
+    </app-demo-container>
+  `,
+  host: { class: 'block' },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSelectDisabledDemoContainer {
+  readonly code = `import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  ScSelect,
+  ScSelectItem,
+  ScSelectList,
+  ScSelectPopup,
+  ScSelectPortal,
+  ScSelectTrigger,
+  ScSelectLabel,
+} from '@semantic-components/ui';
+
+@Component({
+  selector: 'app-select-disabled-demo',
+  imports: [
+    ScSelect,
+    ScSelectItem,
+    ScSelectList,
+    ScSelectPopup,
+    ScSelectPortal,
+    ScSelectTrigger,
+    ScSelectLabel,
+  ],
+  template: \`
+    <div
+      scSelect
+      #select="scSelect"
+      placeholder="Select a fruit"
+      aria-label="Fruit dropdown"
+      disabled
+    >
+      <div scSelectTrigger>
+        <span scSelectLabel>
+          <span class="truncate">{{ select.label() }}</span>
+        </span>
+      </div>
+      <ng-template scSelectPortal>
+        <div scSelectPopup>
+          <div scSelectList>
+            <div scSelectItem value="Apple" label="Apple">Apple</div>
+            <div scSelectItem value="Banana" label="Banana">Banana</div>
+            <div scSelectItem value="Orange" label="Orange">Orange</div>
+          </div>
+        </div>
+      </ng-template>
+    </div>
+  \`,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSelectDisabledDemo {}`;
+}

apps/showcase/src/app/pages/docs/select/demos/select-disabled-demo.ts

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  ScSelect,
+  ScSelectItem,
+  ScSelectList,
+  ScSelectPopup,
+  ScSelectPortal,
+  ScSelectTrigger,
+  ScSelectLabel,
+} from '@semantic-components/ui';
+
+@Component({
+  selector: 'app-select-disabled-demo',
+  imports: [
+    ScSelect,
+    ScSelectItem,
+    ScSelectList,
+    ScSelectPopup,
+    ScSelectPortal,
+    ScSelectTrigger,
+    ScSelectLabel,
+  ],
+  template: `
+    <div
+      scSelect
+      #select="scSelect"
+      placeholder="Select a fruit"
+      aria-label="Fruit dropdown"
+      disabled
+    >
+      <div scSelectTrigger>
+        <span scSelectLabel>
+          <span class="truncate">{{ select.label() }}</span>
+        </span>
+      </div>
+      <ng-template scSelectPortal>
+        <div scSelectPopup>
+          <div scSelectList>
+            <div scSelectItem value="Apple" label="Apple">Apple</div>
+            <div scSelectItem value="Banana" label="Banana">Banana</div>
+            <div scSelectItem value="Orange" label="Orange">Orange</div>
+          </div>
+        </div>
+      </ng-template>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSelectDisabledDemo {}

apps/showcase/src/app/pages/docs/select/select-page.ts

@@ -4,6 +4,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { ScSelectDemoContainer } from './demos/select-demo-container';
+import { ScSelectDisabledDemoContainer } from './demos/select-disabled-demo-container';
 import { ScSelectGroupDemoContainer } from './demos/select-group-demo-container';
 import { TocHeading } from '../../../components/toc/toc-heading';
 import { ComponentBadges } from '../../../components/component-badges/component-badges';
@@ -13,6 +14,7 @@ import { ScHeading } from '@semantic-components/ui';
   selector: 'app-select-page',
   imports: [
     ScSelectDemoContainer,
+    ScSelectDisabledDemoContainer,
     ScSelectGroupDemoContainer,
     TocHeading,
     ComponentBadges,
@@ -33,6 +35,7 @@ import { ScHeading } from '@semantic-components/ui';
         <h2 scHeading toc>Examples</h2>
         <app-select-demo-container />
         <app-select-group-demo-container />
+        <app-select-disabled-demo-container />
       </section>
     </div>
   `,