# Infor tasarım sistemi

## Infor tasarım sistemi Arayüz Önizlemesi

Bir özeti ve iletişim bilgilerini doğrulayın, yerel bir istek hazırlayın ve hiçbir şey göndermeden temizleyin.

## Infor tasarım sistemi Tasarım Referansı

Bu onarım çalışmasında okunan, herkese açık Infor belirteç tablosu tema stil sayfası; ayrıca yayımlanmış ids-enterprise-wc 1.17.1 ve resmî giriş/düğme örnekleri. En güncel belirteç tablosu URL'si, bir paket sürümü garantisi değil, canlı bir anlık görüntüdür.

### Tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ids-color-action-default | var(--ids-color-blue-60) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
| --ids-color-action-stronger | var(--ids-color-blue-70) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
| --ids-color-background-default | var(--ids-color-white-100) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
| --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
| --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
| --ids-color-border-default | var(--ids-color-neutral-60) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
| --ids-color-border-weak | var(--ids-color-neutral-40) | Herkese açık temel/açık temadan alınan anlamsal takma ad. |
### Çözümlenmiş temel değerler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ids-color-blue-60 | #0072ed | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
| --ids-color-blue-70 | #0066d4 | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
| --ids-color-neutral-100 | #161618 | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
| --ids-color-neutral-80 | #3b3b3f | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
| --ids-color-neutral-60 | #6f6f76 | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
| --ids-color-neutral-10 | #f5f5f5 | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
| --ids-color-red-60 | #da1217 | Herkese açık tema temel değeri; koyu veya yüksek karşıtlık modunda da aynı olduğunu varsaymayın. |
### Boşluk takma adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ids-space-2xs | var(--ids-space-04) | Özel uygulama boşluklarında takma adı kullanın. |
| --ids-space-xs | var(--ids-space-08) | Özel uygulama boşluklarında takma adı kullanın. |
| --ids-space-sm | var(--ids-space-16) | Özel uygulama boşluklarında takma adı kullanın. |
| --ids-space-md | var(--ids-space-24) | Özel uygulama boşluklarında takma adı kullanın. |
| --ids-space-lg | var(--ids-space-32) | Özel uygulama boşluklarında takma adı kullanın. |
| --ids-space-xl | var(--ids-space-40) | Özel uygulama boşluklarında takma adı kullanın. |
| --ids-space-2xl | var(--ids-space-48) | Özel uygulama boşluklarında takma adı kullanın. |
### Aralık değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ids-space-04 | 4px | Belirteç stil sayfasındaki somut ölçek değeri. |
| --ids-space-08 | 8px | Belirteç stil sayfasındaki somut ölçek değeri. |
| --ids-space-16 | 16px | Belirteç stil sayfasındaki somut ölçek değeri. |
| --ids-space-24 | 24px | Belirteç stil sayfasındaki somut ölçek değeri. |
| --ids-space-32 | 32px | Belirteç stil sayfasındaki somut ölçek değeri. |
| --ids-space-40 | 40px | Belirteç stil sayfasındaki somut ölçek değeri. |
| --ids-space-48 | 48px | Belirteç stil sayfasındaki somut ölçek değeri. |
### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ids-font-family-sans | source sans pro | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-family-mono | source code pro | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-size-default | var(--ids-font-size-sm) | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-size-sm | var(--ids-font-size-40) | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-size-30 | 14px | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-size-40 | 16px | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-size-50 | 20px | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
| --ids-font-size-60 | 24px | Tipografi referansı; yazı tipi dosyaları ayrıca yüklenmelidir. |
### Köşe yuvarlama takma adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ids-border-radius-xs | var(--ids-border-radius-04) | Takma ad bir temel değere başvurur; her denetimin en büyük köşe yuvarlama değerini kullandığını varsaymayın. |
| --ids-border-radius-sm | var(--ids-border-radius-08) | Takma ad bir temel değere başvurur; her denetimin en büyük köşe yuvarlama değerini kullandığını varsaymayın. |
| --ids-border-radius-md | var(--ids-border-radius-16) | Takma ad bir temel değere başvurur; her denetimin en büyük köşe yuvarlama değerini kullandığını varsaymayın. |
| --ids-border-radius-lg | var(--ids-border-radius-24) | Takma ad bir temel değere başvurur; her denetimin en büyük köşe yuvarlama değerini kullandığını varsaymayın. |
| --ids-border-radius-circle | var(--ids-border-radius-99) | Takma ad bir temel değere başvurur; her denetimin en büyük köşe yuvarlama değerini kullandığını varsaymayın. |
### Giriş ve düğme yapısı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| label | Visible input label | Yalnızca yer tutucu için değil, alan kimliği için kullanın. |
| validate | required / email required | Belgelenmiş doğrulama kuralları. |
| readonly | true | Okunabilir, düzenlenemeyen varlık tanımlayıcısını koruyun. |
| disabled | true | Kullanılamayan giriş durumunu ayrı tutun. |
| clearable | true | Alana özgü temizleme olanağı. |
| dirty-tracker | true | Değişen değerlerin isteğe bağlı izlenmesi. |
| text-align | start \| center \| end | Metin veya sayısal gösterim için mantıksal hizalama. |
### Eylem hiyerarşisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| appearance | primary | Yerel taslağı hazırlayın. |
| appearance | secondary | Destekleyici bir eylem olarak taslağı temizleyin. |
| appearance | tertiary | Daha az vurgulu alternatif. |
| appearance | primary-destructive / tertiary-destructive | Rutin bir iptal için değil, gerçek bir yıkıcı eylem gerektiğinde kullanın. |
| disabled | Boolean attribute | Yerel bileşenin kullanılamama durumu. |
## Infor tasarım sistemi Tam Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Infor tasarım sistemi Kararlı kayıt kimliğine sahip kurumsal bir form

### Ekipman tanımlayıcısını düzenlenebilir istekten ayrı tutun

> Infor, SoHo'yu tasarım dili olarak adlandırır ve IDS'yi kurumsal roller ile verimlilik odağında konumlandırır. Örnek, bu vurguyu bir bakım isteğine uygular: varlık tanımlayıcısı sabit kalırken iş özeti, iletişim bilgileri ve aciliyet düzenlenebilir görev bilgilerini oluşturur.

02006 kimliği bilerek metin dizisi olarak tutulur. Sayıya dönüştürülmesi baştaki sıfırın kaybolmasına ve kimliğin değişmesine yol açar. Yerel IDS örneği, kayıt bağlamının eksik veya kullanılamayan bir alan gibi görünmeden görünür kalması için salt okunur bir giriş kullanır.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Tema takma adları, temel değerler üzerinden çözümlenir

### Takma adı amacına uygun kullanın

Alınan herkese açık tema, varsayılan eylem rengini blue-60, varsayılan ön plan rengini neutral-100 ve ikincil ön plan rengini neutral-80 üzerinden tanımlar. Bu iki katmanlı yapı, uygulama genelinde gerçek renk değerlerini yinelemeden özel bir formun temasıyla tutarlı olmasını sağlar.

Herkese açık belirteç sayfasında Temel, Koyu ve Yüksek Karşıtlık modları sunulur. Bu kılavuzdaki değerler, temel/açık stil sayfasının anlık görüntüsünden alınmıştır. Önizleme, mavi bir hex değerinin bu üç modun tümünde evrensel olduğunu ileri sürmez; üretim bileşeni anlamsal takma adını kullanmalı ve seçili temanın bu değeri belirlemesine izin vermelidir.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Uydurma bir yoğunluk sistemi olmadan somut bir ölçek

### Boşluk, tipografi ve köşe yuvarlama için ayrı takma ad kümeleri bulunur

Boşluk takma adları arasında, 8 piksellik temel değere karşılık gelen xs; 16'ya karşılık gelen sm; 24'e karşılık gelen md ve 32'ye karşılık gelen lg bulunur. Sağlanan yerel CSS, ana iç boşluk için md'yi, alanlar arasındaysa sm'yi kullanır. Böylece niyet kaynak kodunda görünür olurken referans tablosundaki somut değerler de korunur.

Varsayılan yazı tipi ailesi Source Sans Pro, tek aralıklı yazı tipi ise Source Code Pro'dur. font-size-default takma adı, 16 piksellik ölçek girdisine karşılık gelir. Kitaplığı yüklemek, paket README dosyasında açıklanan yazı tipi varlıklarını sağlama gerekliliğini ortadan kaldırmaz. Çevrimdışı önizlemede bunun yerine standart bir yedek yazı tipi kullanılır.

Köşe yuvarlama adları boşluk adlarından ayrıdır: radius-sm 8 piksele, space-sm ise 16 piksele karşılık gelir. Her iki ad da sm ile bitiyor diye hatırlanan aynı sayıyı kullanmak yanlış sonuca yol açar.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Farklı anlamlar taşıyan giriş durumları

### Salt okunur, devre dışı ve değişmiş durumları birbirinin yerine kullanılamaz

Resmî örneklerde readonly, disabled, dirty-tracker, clearable, uppercase, lowercase ve mantıksal metin hizalama özellikleri sunulur. İstek örneğinde varlık kimliği için yalnızca readonly, iş özeti içinse clearable gerekir. E-posta adresinde otomatik büyük/küçük harf dönüşümü etkinleştirilmez ve serbest metinli açıklama sessizce dönüştürülmez.

Yerel giriş örneğinde iletişim alanı için validate="email required" tanımlanır. Yayımlanmış tür bildirimi value, focus() ve checkValidation() sağlar. checkValidation void döndürdüğünden, kod bunu formun geçerliliğini belirten bir Boolean değeri sanmaz; bunun yerine yerel kaydı hazırlamaya izin veren koşulları ayrı ayrı denetler.

- Salt okunur alan, sabit bir varlığı görünür ve okunabilir tutar.

- Devre dışı, alanın şu anda kullanılamadığı anlamına gelir.

- Değişiklik izleme, bir değerin ilk hâlinden farklılaşmasını açıklar; başarı veya doğrulama durumu değildir.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Değişiklik izleme ile doğrulamanın sözleşmeleri farklıdır

### Düzenlemeleri izleyin, ancak geçerli veri saymayın

Resmî IDS giriş galerisi, başlangıç değeri olan bir girişte dirty-tracker="true" kullanımını gösterir. Değişiklik izleme, alanda yapılan düzenlemelerle ilgilidir; kabul edilebilir girdiyi tanımlayan email ve required kurallarının bulunduğu validate özelliğinden ayrıdır. Değiştirilmiş bir iletişim alanında yine de geçersiz bir adres bulunabilir.

Yayımlanmış Input bildirimi checkValidation(): void özelliğini sunar. Bunu bileşenin doğrulama davranışını tetiklemek için çağırın; iş emri eylemine izin veren Boolean koşulu olarak kullanmayın. Yerel örnek, taslak oluşturmadan önce uygulamanın zorunlu değerlerini de denetler. Temizlenebilir özeti ve salt okunur varlık alanı, birbirinden bağımsız iki giriş özelliğini daha gösterir.

Değişiklik izleme belgelenmiş bir genişletmedir; bu önizlemede etkin değildir. Demo, düzenlemelerden sonra hazırlanan özeti temizler ve odağı iş özeti alanına geri taşır; bir bakım isteğinin kaydedildiğini bildirmez.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Formu gizlemeden iki parçalı bir çalışma alanı kullanın

### Önce form, sonra bağlam

Önizlemede form; kompakt bir ekipman bağlam kartı ve özgün, basit bir makine çizimiyle eşleştirilir. Ana okuma sırası başlık, alanlar, eylemler ve sonuç şeklinde kalır. Dar ekranlarda bağlam, girişleri okunamayacak sütunlara sıkıştırmak yerine formun altına taşınır.

Kitaplık örneklerinde, kesme noktasına göre sütun nitelikleri içeren ids-layout-grid kullanılır. Bu örnek bilerek daha basit, kendine ait bir duyarlı düzen kullanır; maksimum genişlik ve kesme noktası uygulamaya özgü değerlerdir. Gösterilen özellikler, belirteç tabanlı aralıklar ve yerel denetim etiketleridir.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Yerel paketin sürümünü sabitleyin ve değerleri okumadan önce başlatın

### Yayımlanmış paket, güvenilir başlangıç noktasıdır

Doğrulanan paket; 1.17.1 sürümünü, enterprise-wc.js ES modülü giriş noktasını ve güncel Infor tarafından barındırılan kaynak kod deposunu belirtir. Bu nedenle eski GitHub konumu, güvenilir bir yükleme yönergesi değildir. Kod, yayımlanmış paketi içe aktarır, bileşimi ekler ve davranışları bağlamadan önce özel öğe tanımlarının yüklenmesini bekler.

Resmî canlı örneklerde derlemeye özgü parça URL'leri bulunur. Rastgele bir parça adını uygulamaya kopyalamak, uygulamayı bir dağıtım çıktısına bağımlı hâle getirir; paket giriş noktası, bu bağımlılıkları derleme aracının çözmesini sağlar. Bu kılavuz herkese açık yöntem bildirimlerini doğrular ve tarayıcı örneğini yerel derleme iddiasından açıkça ayrı tutar.

1. Sabitlenmiş paketi Vite vanilla iskeletine yükleyin ve belgelenen yazı tipini uygulamanızın varlık politikasına göre ekleyin.

2. Sağlanan giriş noktasını ve CSS'ı kullanın, özel öğelerin yüklenmesini bekleyin, ardından birincil ve sıfırlama eylemlerini bağlayın.

3. Boş özeti, hatalı e-posta adresini, geçerli yerel taslağı ve sonraki bir düzenlemeyi sınayın; görüntülenen anlık görüntünün güncelliğini yitirmediğinden emin olun.

Destekleyici belirtimi okuyun

## Infor tasarım sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedin ve bir tarayıcıda açın. Doğrulanmış IDS core/light token değerleri ve sistem yazı tipi yedeğiyle bağımsız HTML/CSS yorumu. Yerel IDS çalışma zamanı değildir.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Maintenance request — IDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;color:#161618;background:#f5f5f5;font:16px/1.45 Arial,sans-serif}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;border-bottom:1px solid #bbbbbf;padding-bottom:16px;gap:16px}header b{font-size:14px}header span{font-size:13px;color:#3b3b3f}h1{font-size:32px;line-height:1.2;font-weight:500;margin:24px 0 8px}h2{font-size:20px;font-weight:500;margin:0 0 16px}.intro{color:#3b3b3f;margin:0 0 24px}.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.form,.context{background:white;border:1px solid #e0e0e1;border-radius:8px;padding:24px}label,.label{display:block;font-size:14px;margin-bottom:8px}input{width:100%;font:inherit;border:1px solid #6f6f76;border-radius:4px;padding:10px 12px;color:#161618}input[readonly]{background:#f5f5f5}input:focus,button:focus-visible{outline:3px solid #8abff7;outline-offset:2px}.field{margin-bottom:16px}.hint{font-size:12px;color:#3b3b3f;margin:4px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}button{font:inherit;border-radius:4px;padding:10px 16px;cursor:pointer;border:1px solid #6f6f76;background:white;color:#161618}.primary{background:#0072ed;color:white;border-color:#0072ed}.primary:hover{background:#0066d4}fieldset{padding:0;border:0;margin:24px 0 0}legend{font-size:14px;margin-bottom:8px}.radios{display:flex;gap:16px;flex-wrap:wrap}.radios label{display:flex;gap:8px;align-items:center;margin:0}.radios input{width:auto;accent-color:#0072ed}.equipment{height:190px;background:#e6f1fd;display:grid;place-content:center;margin-bottom:24px;border-radius:4px}.machine{border:3px solid #0054b1;width:165px;height:100px;position:relative;background:white}.machine:before{content:'';position:absolute;left:14px;top:16px;width:55px;height:55px;border:8px double #0054b1;border-radius:50%}.machine:after{content:'02006';position:absolute;right:10px;top:27px;color:#0054b1;font:16px monospace}.context dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;font-size:14px}.context dt{color:#3b3b3f}.context dd{margin:0;text-align:right}.notice{font-size:13px;background:#f5f5f5;padding:16px;margin-top:24px}.error{color:#a30d11;font-size:14px;min-height:20px}.result{background:#e6f1fd;padding:16px;border-left:3px solid #0072ed;margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.result[hidden]{display:none}.foot{font-size:12px;color:#3b3b3f;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.form,.context{padding:20px}header{flex-direction:column;gap:4px}h1{font-size:28px}.equipment{height:140px}}</style><main><header><b>ASSET SERVICE / LOCAL NOTEBOOK</b><span>Independent Infor IDS interpretation</span></header><h1>Prepare the work. Keep the context.</h1><p class="intro">Build a local maintenance draft for a fixed equipment record.</p><div class="grid"><form id="form" class="form" novalidate><div class="field"><label for="asset">Asset identifier</label><input id="asset" value="02006" readonly><p class="hint">Read-only record identity; leading zero preserved.</p></div><div class="field"><label for="summary">Work summary</label><input id="summary" required placeholder="For example, inspect the drive belt" aria-describedby="error"></div><div class="field"><label for="contact">Contact email</label><input id="contact" type="email" required placeholder="name@example.com" aria-describedby="error"></div><fieldset><legend>Planning urgency</legend><div class="radios"><label><input type="radio" name="urgency" value="Routine" checked>Routine</label><label><input type="radio" name="urgency" value="Soon">Soon</label></div></fieldset><div class="actions"><button class="primary" type="submit">Prepare local draft</button><button id="clear" type="button">Clear draft</button></div><p id="error" class="error" role="alert"></p><div id="result" class="result" role="status" hidden></div></form><aside class="context"><div class="equipment" role="img" aria-label="Original schematic of fictional equipment 02006"><div class="machine"></div></div><h2>Equipment context</h2><dl><dt>Record</dt><dd>02006</dd><dt>Area</dt><dd>Sample workshop</dd><dt>Type</dt><dd>Drive assembly</dd><dt>Connection</dt><dd>Offline sample</dd></dl><p class="notice">Preparing a draft changes only this page. It does not create a work order or send a message.</p></aside></div><p class="foot">Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.</p></main><script>const form=document.querySelector('#form'),summary=document.querySelector('#summary'),contact=document.querySelector('#contact'),error=document.querySelector('#error'),result=document.querySelector('#result');function clearResult(){result.hidden=true;result.textContent='';error.textContent='';summary.removeAttribute('aria-invalid');contact.removeAttribute('aria-invalid')}form.addEventListener('input',clearResult);form.onsubmit=e=>{e.preventDefault();clearResult();if(!summary.value.trim()){error.textContent='Enter a work summary.';summary.setAttribute('aria-invalid','true');summary.focus();return}if(!contact.value.trim()||!contact.validity.valid){error.textContent='Enter a valid contact email.';contact.setAttribute('aria-invalid','true');contact.focus();return}result.hidden=false;result.textContent='LOCAL DRAFT / NOT SENT\n\nAsset: 02006\nSummary: '+summary.value.trim()+'\nContact: '+contact.value.trim()+'\nUrgency: '+form.elements.urgency.value};document.querySelector('#clear').onclick=()=>{form.reset();clearResult();summary.focus()};</script></html>
```

Kod referansı

- 02006 varlığı bir metin olarak kalır. Yerel IDS örneği, bu HTML formu değil, özel öğe kaydını ve checkValidation() işlevini kullanıma açar; bunların hiçbiri bakım emri oluşturmaz.

### Salt okunur tanımlayıcı, zorunlu özet ve iletişim doğrulaması

IDS giriş doğrulaması açıkça çağrılır; uygulama denetimleri boş bir yerel taslağı önler. Kullanıcı metni textContent ile görüntülenir.

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
 summary.checkValidation();contact.checkValidation();
 const title=summary.value.trim(),email=contact.value.trim();
 if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
 if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
 draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
 message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});

/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
```

Kod referansı

- checkValidation() void döndürür; Boolean sonuç olarak değerlendirilmez.

- 02006 varlığı metin olduğundan baştaki sıfırı korunur.

- Önizlemenin hazırlanması yalnızca yerel sayfa durumunu değiştirir.

### Eylem görünümü açıkça belirtilir

Birincil ve ikincil bileşen varyantları, iş akışının ana eylemini belirginleştirir.

```
<ids-button appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button appearance="secondary"><span>Clear draft</span></ids-button>
```

Kod referansı

- Kullanılamayan bir bileşen yalnızca soluk bir stille değil, disabled ile belirtilir.

## Infor tasarım sistemi AI Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

#app kullanan bir Vite vanilla iskeleti için eksiksiz giriş dosyası ve stil sayfası. Paket sürümü ve yöntemler yayımlanmış pakette denetlendi; burada derleme yapılmadı. Source Sans Pro'yu onaylı bir yazı tipi kaynağı üzerinden sağlayın. Gömülü önizleme, yerel HTML uygulamasından bağımsızdır.

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
 summary.checkValidation();contact.checkValidation();
 const title=summary.value.trim(),email=contact.value.trim();
 if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
 if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
 draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
 message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});

/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
```

### Projeniz İçin Bir İstem

```
Doğrulanmış açık tema takma adlarını ve belgelenmiş giriş/düğme yapısını kullanarak bir Infor IDS bakım taslağı oluşturun. Varlık tanımlayıcısını metin olarak ve salt okunur tutun. Düzenlenebilir alanları doğrulayın, düzenlemelerden sonra eski çıktıyı temizleyin ve yerel taslağı gönderilmiş bir iş emrinden ayırın. checkValidation() işlevinin Boolean döndürdüğünü varsaymayın.
```

## Infor tasarım sistemi Kaynaklar ve Kapsam

Bağımsız OpenDesign kılavuzu. Varlık ve iş akışı kurgusaldır; hiçbir şey gönderilmez. Yerel kod, denetlenmiş 1.17.1 paketini temel alır; token değerleri ise ayrı bir canlı core/light tema anlık görüntüsü olarak belirtilmiştir.

- Infor Design SoHo dili ve kurumsal kapsam.

- Canlı token stil sayfası Gerçek core/light token değerleri ve takma adları.

- Giriş örnekleri Herkese açık bileşen işaretlemesi ve durumları.

- Düğme örnekleri Eylem varyantları.

- Yayımlanmış 1.17.1 paketi Sürüm ve modül girişi.

- Paket README dosyası Kurulum ve yazı tipi gereksinimi.

- Giriş türü bildirimleri value, focus ve checkValidation imzaları.

## Infor tasarım sistemi İlgili Kaynaklar

### Kajabi Sage

Kurs bağlamı açık, kopyalama eylemleri belirgin ve pano geri bildirimi gerçeğe uygun, içerik üreticilere yönelik bir paylaşım paneli oluşturun. Sage’in Rails bileşen anatomisini, yayımlanmış tipografi özelliklerini ve harici olarak yüklenen yeni Pine tasarım belirteci katmanını inceleyin.

### Kiwi Orbit

Gerçek ürün renkleri ve boşlukları, yerel bagaj seçenekleri, tutarlı bir fiyat dökümü ve eksiksiz yerel inceleme akışı içeren, seyahate odaklı bir Orbit kılavuzu.

### Maersk tasarım sistemi

Gerçek açık tema rolleri, başlık ve metin ölçekleri, iç içe yarıçaplar ve tanımlayıcı işleme yoluyla Maersk’in operasyonel arayüz dilini inceleyin. Örnek bir gönderi sorgulaması, canlı lojistik verilerine erişim iddiasında bulunmadan tam referans eşleştirmesini ve erişilebilir bir olay geçmişini gösterir.


- [Uygulama başvurusu](https://latest.wc.design.infor.com/ids-input/example.html)
- [Kaynak](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Kaynak](https://latest.wc.design.infor.com/ids-input/example.html)
- [Kaynak](https://latest.wc.design.infor.com/ids-button/example.html)
- [Destekleyici belirtimi okuyun](https://design.infor.com/)
- [Destekleyici belirtimi okuyun](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Destekleyici belirtimi okuyun](https://latest.wc.design.infor.com/ids-input/example.html)
- [Destekleyici belirtimi okuyun](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Destekleyici belirtimi okuyun](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Kod referansı](https://latest.wc.design.infor.com/ids-input/example.html)
- [Kod referansı](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Kod referansı](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design SoHo dili ve kurumsal kapsam.](https://design.infor.com/)
- [Canlı token stil sayfası Gerçek core/light token değerleri ve takma adları.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Giriş örnekleri Herkese açık bileşen işaretlemesi ve durumları.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Düğme örnekleri Eylem varyantları.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Yayımlanmış 1.17.1 paketi Sürüm ve modül girişi.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Paket README dosyası Kurulum ve yazı tipi gereksinimi.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Giriş türü bildirimleri value, focus ve checkValidation imzaları.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
